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 Build a Responsive Navigation with Flexbox

Eusebiu Gagea
Eusebiu Gagea
14,127 Points
Posted by Eusebiu Gagea
Eusebiu Gagea
14,127 Points

main content displayed over nav

When I set the main-header class 200px width all things fall. Content is displayed over nav and nav lose its height but is still displayed in the same way. Why in the video this thing doesn't happen?

@media (min-width: 769px) {
  .main-header {
    height: 200px;
  }

  .site-logo {
    width: 140px;
  }

  .nav {
    margin-top: 3em;
  }

  .nav a {
    border-bottom-color: transparent;
  }
}

This is my css. The problem is that in the video the content of the header does not get out of his parent, but normally especially the content of the nav gets over normal flow of his parent resulting in displaying over main content. It looks like in video the padding around nav elements are removed and I don't understand why. It doesn't looks to me like the normal behavior. My code is exactly like in the video.

Brandon Benefield
Brandon Benefield
7,739 Points
Brandon Benefield
Brandon Benefield
7,739 Points

Go ahead and add your HTML and CSS so that some one can actually see your code and help you. Help us help you.

Sam Gord
Sam Gord
14,084 Points
Sam Gord
Sam Gord
14,084 Points

in the style.css file change the style of the .main-content like this

@media (min-width: 769px) {
    .main-content {
        margin-top: 8em;
    }
}

1 Answer

Hakim Rachidi
Hakim Rachidi
38,489 Points
Hakim Rachidi
Hakim Rachidi
38,489 Points

Hi Eusebiu,

I think as in my case the flexitems are overflowing their parent. You can see that by going into the inspector in your browser and let it mark the ul. To avoid that you can cut it of:

 .nav {
    overflow: hidden;
  }