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 Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

Luqman Shah
Luqman Shah
3,016 Points
Posted by Luqman Shah
Luqman Shah
3,016 Points

How?

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

"If we remove the main-nav class selector in the media querry from this rule, we can see how main-nav is back to being a block level element, so it drops down to the next line. Now to center align these elements in the header, add a text-align property and set the value to center. This will center align the content inside of main header."

.main-header {
    text-align: center;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    background: #3acec2;
    margin-bottom: 30px;
}

Ok wait, how has the main-nav gone back to being a block level element, when once we removed the .main-nav class elector, as he assigned, there is still a .main-nav li selector there, so shouldn't we remove that as well? But even though we didn't, it was still able to become a block level element. How?

1 Answer

Nick Trabue
PLUS
Nick Trabue
Courses Plus Student 12,666 Points
Nick Trabue
Nick Trabue
Courses Plus Student 12,666 Points

Each element has it's own properties. Parent elements have properties. Children elements have properties. You can set a child's properties to be different than it's parents. <div> and <ul> by default is a block level element. For a full list check this mdn page https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

<ul class="main-nav"> <!--- block element by default will occupy it's own line -->
     <li>thing</li> <!--Block element by default -->
     <li>thing 2</li> <!-- Block element by default -->
     <li>Thing 3</li> <!-- Block element by default -->
</ul>
</div>
<img class="logo"> <!---Inline-Block element by default

  .name,
  .main-nav, /*Don't forget the comma here. This makes .main nav now inline with the logo at higher resolutions*/
  .main-nav li {
    display: inline-block;
  }
/*note that ".main-nav li" is only targeting the list items in .main-nav It's not targeting .main-nav itself. */

  .name,
  .main-nav li {
    display: inline-block;
  }
/*Now .main-nav will be on it's own line. The list items will be inline. */

Hopefully that helps?