CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Sticky Footer with Flexbox

Robert Rydlewski
Robert Rydlewski
3,046 Points

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

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

1 Answer

Adam Pengh
Adam Pengh
28,838 Points

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;
}
Robert Rydlewski
Robert Rydlewski
3,046 Points

I completely misunderstand the concept of it. Thank you for cleaning this for me :) I appreciate your help. Happy coding :)