Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Robert Rydlewski
Robert Rydlewski
3,828 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">
    <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">
    <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>
     <!--Main header-->
     <section class="main-section">
         <h1 class="main-text">Passion for Snowboarding</h1>


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


@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,881 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,828 Points

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