flexbox misunderstanding. Instead of using ```display: inline block;``` I want to do the flexbox but it doesn't work :(

Question

Hi I wrap the container in display: flex then the child element I add the flex-direction: row; even though I wrote 5 different articles and I have done it as is on the treehouse and all different recourses it doesn't work. why ????? this should be the easiest concept but for some reason not working. Check this out :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Passion for snowboarding</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="normalize.css">
</head>
<body>
    <header class="main-header">
        <ul class="main-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Extra</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
     </header>
     <!--Main header-->
     <section class="main-section">
         <h1 class="main-text">Passion for Snowboarding</h1>

     </section>

     <footer class="main-footer">
            <span>&copy;2019 of Robert Rydlewski.</span>
        </footer>

</body>
</html>```


```CSS
@import url('https://fonts.googleapis.com/css?family=Philosopher&display=swap');

*{
    box-sizing: border-box;
}

body {
    font-family: "Philosopher", 'Courier New', Courier, monospace;
    margin: 0;

}
/* ================================= 
  Base Layout Styles
==================================== */

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;

}
    main-nav a {
      text-align: center;
      display: block;
      padding: 10px 15px;
  }

  .main-nav a:hover {
      color: #093a58;
  }

  .main-header {
      display: flex;
  }

  .main-nav {
    flex-direction: row;
  }

as you see I wrapped the main-header class with display flex and then the child main-nav class in flex-direction: row;
However, it doesn't work.
Can someone please help me

Answer 1 · 2019-06-30T16:58:08Z

June 30, 2019 4:58pm

I think what you're trying to do is make the ul.main-nav element the flex parent and each of the li items flex children. flex-direction should be applied to the parent element. This article is a great reference on Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.main-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

Welcome to the Treehouse Community

Looking to learn something new?

Robert Rydlewski

Robert Rydlewski

flexbox misunderstanding. Instead of using ```display: inline block;``` I want to do the flexbox but it doesn't work :(

1 Answer

Adam Pengh

Adam Pengh

Robert Rydlewski

Robert Rydlewski