Planning & Implementation

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

3. Content Container
4. Top Section
5. 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 😉