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

Posted by Lee Cockcroft
Lee Cockcroft
5,147 Points

Techdegree profile page

Hi All,

Could someone help me please who are undertaking the tech degree

Ive started the profile page challenge, however some of the CSS i really dont understand.

The code below: nav .name { display: block;

margin-right: auto;

color: white;

}

1: I thought "display:block" takes up the full line? also why does this need the display? and how does margin-right: auto place the tag where it is, and float left doesn't?

.

If it helps, ive coped the html, and css for the whole nav, however, if you have completed the profile page, the code above should be enough. Thanks all, hope this isnt too blunt :)

<div class="main-nav">

<ul class="nav">

<li class="name">Name</li>

  <li><a href="#">Home</a></li>

<li><a href="#">Experience</a></li>

</ul>

</div>

.main-nav { width: 100%;

background: black;

min-height: 30px; padding: 10px;

position: fixed; text-align: center;

}

.nav {

display: flex;

justify-content: space-around;

font-weight: 700;

list-style-type: none;

margin: 0 auto;

padding: 0;

}

.nav .name { display: block;

margin-right: auto;

color: white;

}

.nav li {

padding: 5px 10px 10px 10px; }

.nav a {

transition: all .5s;

}

.nav a:hover {

color: white

}

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

I'm not a Techdegree student, but I think I can answer your questions.

The property display: block; doesn't necessarily take up a full line, but it will take up the width of the current container. In this case, what's more important is that the parent has been made a flex container, and since the default direction is horizontal, it will share the line with the other flex items. Depending on the browser, this display mode might actually not be necessary as the default display value (list-item) would likely be shown the same way.

The use of margin-right: auto; in a flex item causes all the available space that would normally be distributed between all the items to be placed to this item's right instead. This gives flex items the ability to operate like floats, but without disturbing the normal document flow the way floats do. Try removing and replacing this line from the CSS to see for yourself how it works.

And using float would not be effective on a flex item, though it could be used to achieve a similar layout appearance if the list items were not part of a flex box.

I hope that clears things up!

Lee Cockcroft
Lee Cockcroft
5,147 Points
Lee Cockcroft
Lee Cockcroft
5,147 Points

Many thanks for your help. I've only just discovered the flex part of css, so it was all new for me

Thanks you for your help