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 Techniques Display Modes Block vs. Inline Elements

Posted by Justus Thompson
Justus Thompson
3,201 Points

I'm putting the elements as display:inline; but the logo and the nav li are not on the same line. The logo is still top.

They will not go on same line, even with the display set to inline.

Rich Bagley
Rich Bagley
25,869 Points

Hi Justus,

Can you post the HTML and CSS of the section of code you're having problems with please and we'll take a look?

Thanks

-Rich

Justus Thompson
Justus Thompson
3,201 Points

/* <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Justus Thompson's Website</title> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/normalize.css"> </head>

<body> <div class="main-wrapper">

<!-- Header --> <header class="header">

    <!-- Logo -->
      <h1 class="logo">Justus Thompson</h1>

    <!-- Nav -->
      <nav class="nav">
        <ul>
          <li><a href="#intro">Intro</a></li>
          <li><a href="#one">About</a></li>
          <li><a href="#two">What I Do</a></li>
          <li><a href="#work">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>

  </header>

</div> </body> </html>

{ font-family: 'Open Sans', 'Roboto', sans-serif; } /color/

.logo{ background-color: blue; }

.nav { background-color: green; }

/* end color */

.main-wrapper{ background-color:#878787; width:90%; margin:auto; }

.header{ padding: 20px; }

.logo, .nav, .nav li { display: inline; }

*/

1 Answer

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Justus,

Can you try changing this:

.logo, .nav, .nav li { display: inline; }

to the following please:

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

If this doesn't work can you try applying a width in the styles to the elements you want displaying next to each other please?

Hope that helps

-Rich

Justus Thompson
Justus Thompson
3,201 Points

thanks, i'll try that.

Italo Lemos
Italo Lemos
2,841 Points
Italo Lemos
Italo Lemos
2,841 Points

Hey Rich, I have been the same Thompson's issue and I made a change to inline-block so What really means when I chance inline to inline-block?