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
Kyle Johnson
8,499 PointsI am stuck on this one. What value displays the ul so its not taking up the whole line?
I'm stuck here.
/* Complete the challenge by writing CSS below */
header {
text-align: center;
}
.logo {
width: 110px;
margin: auto;
}
.main-nav {
display: ???;
}
.main-nav li {
display: inline-block;
}
<!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>
2 Answers
Garrett Levine
20,305 Pointsa <ul> is a block element. Block elements take up 100% width if undefined of the container that they are in. Unless that container's width is also strictly defined, this often means it will cover 100% of the window.
Inline elements are the opposite. They only take up the width of the elements inside of them. This is what span tag or anchor tag is inherently. However, when an element is inline, it can't receive certain css declarations like padding.
what you are PROBABLY looking for is a nice mix! You can display something inline-block, which will render the element inline and still allow it to receive styles that block elements are allowed to receive!
Steven Parker
231,007 PointsGarrett's right, and nothing PROBABLY about it.
