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 CSS Display Modes Challenge

justinw
justinw
14,517 Points
Posted by justinw
justinw
14,517 Points

Display list items inline...

Challenge 1 of 3 in the CSS Display course (Display the list items inside .main-nav side by side. Use the display value that generates a block element that flows with surrounding content.)

I am struggling to lay out the .main-nav list items on the same line. I have tried inline and inline block, neither have worked. Any ideas? CSS below.

style.css 
/* Complete the challenge by writing CSS below */

header {
  text-align: center;
}
.logo {
  width: 110px;
  margin: auto;
}

.main-nav li {
 display: inline; 
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
    <div class="container">
        <header>
            <img class="logo" src="city-logo.svg" alt="logo">
            <ul class="main-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
        </header>
    </div>
    </body>
</html>

3 Answers

Karen Freeman-Smith
Karen Freeman-Smith
29,248 Points

inline-block should work... sometimes I have an element that is 100% wide so the width may need to be changed as well?

justinw
justinw
14,517 Points
justinw
justinw
14,517 Points

Hey Karen Freeman-Smith you're right, forgot the - in "inline-block". The downside to working on 3 hours of sleep =).

Ethan Rivas
Ethan Rivas
9,979 Points
Ethan Rivas
Ethan Rivas
9,979 Points

Hi! This is what you've to do, you have to give each list item inside the .main-nav the display: inline-block, give the same display to the .main-nav and after that give to the logo a display: block, sorry if I can't explain it at 100% but my english to explain is not the best :p

header {
  text-align: center;
}

.logo {
  display: block;
  width: 110px;
  margin: auto;
}

.main-nav {
  display: inline-block;
}

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