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 Layout Basics Controlling Layout with CSS Display Modes Positioning Elements Side-By-Side with Inline Display

Posted by Anthony Branze
Anthony Branze
4,887 Points

Inline display problem

Hello, I am working through the video and have the exact same code as guil. But when I refresh the browser my main-nav does not fall inline. It stays as block level elements when i adjust screen nothing happens. How ever. If I change the setting INSIDE browser it takes effect immediately and looks how it is supposed to. I dont know if it is just me, or perhaps chrome, or maybe all of the above. But either way here is my code.

/n EDIT: The main-nav li, is greyed out in my dev tools, And when I go into the computed Styles tab, and inspect the display it is set to block Via the "user agent style sheet" and also another problem I am having and I just found this one. Is that when I am using the rule ".main-nav li" upon inspection it is coming in as ".main-nav ul" when I reload my UI. I dont get it.

@media (min-width: 769px) {

    .wrap {
        min-height: calc(100vh - 89px);
    }

    .container {
        width: 80%;
        max-width: 1150px;
        margin: 0 auto;
    }
 .name,
  .main-nav li {
  display: inline;
}

}
Jose Esplana
Jose Esplana
12,503 Points
Jose Esplana
Jose Esplana
12,503 Points

Did you forget to include .main-nav on your line?

  .name,
  .main-nav,
  .main-nav li {
    display: inline;
}

1 Answer

Casey Ydenberg
Casey Ydenberg
15,622 Points
Casey Ydenberg
Casey Ydenberg
15,622 Points

If you change the setting inside the browser and it works that usually means some other CSS is overriding your selector. Inspect the element and look for display: inline under CSS rules. Probably it will be crossed out and something else is taking it's place.

Anthony Branze
Anthony Branze
4,887 Points

Just did, Exactly correct and the .main-nav is greyed out when I do different things.

Going through the CSS provided there is another rule but its outside of the media query, Would that affect in this way?

Casey Ydenberg
Casey Ydenberg
15,622 Points
Casey Ydenberg
Casey Ydenberg
15,622 Points

Hmmm ... the user agent stylesheet shouldn't override a set rule. Remember you aren't looking for .main-nav but .main-nav li.