Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Robert Rydlewski
Robert Rydlewski
3,827 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
29,877 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,827 Points

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