CSS CSS Layout CSS Layout Techniques Display

Ulyssa Sneed
Ulyssa Sneed
6,025 Points

lock-level element by default, so it takes up its container's full width. Set .main-list to be as wide as content???

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

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


.main-list li {
  display: inline-block; 

}
.main-list ul {
display: inline;
width: auto;

}
index.html
<!DOCTYPE html>
<html>
<head>
    <title>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="An illustration of a building">
            <ul class="main-list">
                <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

Ryan Groom
Ryan Groom
18,591 Points

hey Ulyssa Sneed you're on the right track, but if you look in the HTML code you'll realize that the element that has the .main-list class on it is the <ul> item. So in your CSS when you are targeting ".main-list ul" you are actually trying to target a "ul" element that is a child of the ".main-list" element which does not exist because they are actually the same element. As for the rest, you do not need the "width: auto;" and your display should actually be set to "display: inline-block;". Your final result should look like:

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

Let me know if you have any questions.

Matt WebDev218
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Matt WebDev218
Front End Web Development Techdegree Graduate 16,241 Points

Hi Ulyssa Sneed, Ryan is correct about the class selector, although I don't think you need to set it to inline block unless you want to have another element on the same line within it's parent. But if you want to center your LI's you will also need to remove padding from the .main-list class, as UL's have some by default. I set it to margin auto as I find it makes the element easier to style than using width: 100%. If you add a background or border the margin will be outside of that.

.main-list {
   padding: 0;
   margin: auto;
}