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 CSS Layout Techniques Display

Posted by FRANKIE Ochoa
FRANKIE Ochoa
2,759 Points

CSS Layout

can someone please show me the way lol I don't know how to code this right

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

header {
  text-align: center;
}
.logo {
  width: 60px;
  margin: auto;
}
.main-list li {
  display: inline-block;
}
.nav-link a {
  font-size: bold;
}
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>

1 Answer

Peter Vann
Peter Vann
36,427 Points

Hi Frankie!

The whole purpose of these challenges is basically to demonstrate that you understand the difference between the block and inline-block settings for the display property (and child selectors, as well).

display: block - sets the element to be the full width of its parent container display: inline-block - sets the element to be only as wide as its content (and is what allows a list to layout horizontally like a desktop nav menu).

This passes the first challenge:

/* Complete the challenge by writing CSS below */

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

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

This passes the second:

/* Complete the challenge by writing CSS below */

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

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

This passes the third:

/* Complete the challenge by writing CSS below */

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

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

More info:

https://www.w3schools.com/css/css_inline-block.asp

https://www.w3schools.com/cssref/css_selectors.asp

I hope that helps.

Stay safe and happy. coding!

FRANKIE Ochoa
FRANKIE Ochoa
2,759 Points

thanks a lot this really helps I'm taking notes now but im having fun doing this i cant wait to make my first website!!! lol happy coding