CSS CSS Flexbox Layout Understanding Flexbox Flex Container Challenge

Carlos Williamson
Carlos Williamson
810 Points

I'm not sure how to proceed.

Can I move forward without completing the exercise?

index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Flexbox Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <ul class="main-nav">
        <li class="name"><a href="#">My Site</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>
  </body>
</html>
style.css
/* Complete the challenge by writing CSS below */

2 Answers

Jennifer Nordell
STAFF
Jennifer Nordell
Treehouse Staff

You just need to make the element with the class "main-nav" into a flex container. You do this by targeting the class and then setting the display value to flex. `This is done in your CSS file.

.main-nav {
  display: flex;
}

First you click on the style.css tab. Then you write a rule, as discussed in the video:

.main-nav {
  display: flex;
}

This rule selects (or targets) the elements that have a class="main-nav" attribute.

In this exercise there's only one such element:

<ul class="main-nav">
        <li class="name"><a href="#">My Site</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
Carlos Williamson
Carlos Williamson
810 Points

Thank you, jcorum. I appreciate it.