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!

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

John Lukacs
John Lukacs
26,791 Points

Nav sticking together (margins only adding to the block)

I am unable to seperate my nav li items any ideas.

<nav class="main-nav">
<ul>
<li><a href="#">
rel Q</a></li>
<li><a href="#">
rel Q</a></li>
<li><a href="#">
rel Q</a></li>
<li><a href="#">
rel Q</a></li>
</ul>
</nav>

10 Answers

Add padding. Margin is outside, padding is inside.

John Lukacs
John Lukacs
26,791 Points

I want margins so they don't sit right next to each other

li {
  padding: 0 5px;
}

That sets padding left and right to 5px. You can also set on only one side if you want. Google mdn CSS padding for more reference.

John Lukacs
John Lukacs
26,791 Points

It diden't work. I want space between the list items not to grow the list items bigger

Charlie Bradley
Charlie Bradley
17,935 Points
li{
   margin:5px;
}

This should work to space the list. Are you correctly linked to your stylesheet?

John Lukacs
John Lukacs
26,791 Points

I tried it it diden't work yes I have many styles that work

I don't understand what you want. I understand that you want space between the individual items in the list. That would be best done with padding. Do you want your list to display vertically or horizontally? If it is horizontal, then try for padding on the top and bottom of each list item.

li {
  padding: 5px 0;
}

If you only want it on the bottom:

li {
  padding: 0 0 5px 0;
}

or top only:

li {
  padding: 5px 0 0 0;
}

or you could use one of these commands:

li {
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

Obviously, add the right number of px to make it look the way you want. You can also use ems, like 1.2em, but I would stick with px.

If you cannot achieve what you want with any of these, I don't understand what the issue is.

Please post the actual css code you are using.

Charlie Bradley
Charlie Bradley
17,935 Points

Got to agree with Ted, padding probably would be better, especially if you plan on using borders around your list items. What's your CSS?

John Lukacs
John Lukacs
26,791 Points
@media(min-width: 768px){
.main-logo,
.main-nav li,
.main-nav,
.main-nav a,
.main-logo a{
    display: inline-block;
    margin-left: 0px;
}
.main-logo, .main-logo h1  {
float:left;
margin-left:20px;
position:relative;
left: 25px;

}
.main-nav li a{
margin: 0 15px 0 15px;
border-radius: 10px;    
}
header{
display:table;
width:100%;
min-height: 170px;  
}
.main-logo,
main-nav{
display:table-cell;
vertical-align: middle;
width:120px

}
.main-logo,
.main-nav li,
.main-nac li a
{padding: 10px 20px;
border-radius: 5px;
}
.main-logo{
margin-right: 150px;    
}
.main-nav{
float:right;
margin-right: 200px;    
}
 li {
    padding: 0 25px;
    border: solid 4px;
}
}

padding is not working

John Lukacs
John Lukacs
26,791 Points

Here is the code that worked ```css .main-nav li, main-nav a{ margin: 0 15px; }

You have a typo in your css. In your padding you call main-nac a, not main-nav a.