Task 3: Content Container
Planning & ImplementationHint
Task 5: Bottom Section
Task 3: Content Container (continued)
Change RequestsUpdate Pull Request

Planning & Implementation

Task 3: Content Container

By now we implemented two tasks: the header and footer. Three more are left:

  1. Content Container
  2. Top Section
  3. Bottom Section

The content container will be the element that is responsible for setting a maximum width to the content and center it horizontally.

You're on your own

You've been through this process a couple of times now. For this task, I'll only provide the code. You can use the roadmap to navigate through the process.

Once you request a code review ooloo-bot will tell you what to do next.

The code

The code change is very small. Since we already added a content container in the markup we just have to work on the styles.

Add the two highlighted lines to the file src/styles.css.

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
.header {
height: 49px;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid black;
.footer {
height: 49px;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid black;
.content {
min-height: calc(100vh - 100px);
width: 720px;
margin: auto;

These lines set a fixed width to the container and center it horizontally.

Now use the roadmap and your Git magic. We'll see each other after the code review 😀

Note: If you need some help feel free to check out the next page. But give it a try yourself first 😉

Next: Hint

Terms of UsePrivacy