CSS CSS Flexbox Layout Understanding Flexbox Flex Container Challenge

Raeed Sabree
Raeed Sabree
10,664 Points
Posted by Raeed Sabree
Raeed Sabree
10,664 Points

the first step to using flexbox is creating a flex container targert .main-nav and make it a flex container

what do i do?

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 container">
        <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 */
.container {
display: flex;
}

1 Answer

Muhamed Asil
Muhamed Asil
7,453 Points
Muhamed Asil
Muhamed Asil
7,453 Points

html file

      <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>

css file

/* Complete the challenge by writing CSS below */
.main-nav {
display: flex;
}