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 trialJohn Lukacs
26,806 PointsNav 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
Ted Sumner
Courses Plus Student 17,967 PointsAdd padding. Margin is outside, padding is inside.
John Lukacs
26,806 PointsI want margins so they don't sit right next to each other
Ted Sumner
Courses Plus Student 17,967 Pointsli {
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
26,806 PointsIt diden't work. I want space between the list items not to grow the list items bigger
Charlie Bradley
17,935 Pointsli{
margin:5px;
}
This should work to space the list. Are you correctly linked to your stylesheet?
John Lukacs
26,806 PointsI tried it it diden't work yes I have many styles that work
Ted Sumner
Courses Plus Student 17,967 PointsI 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.
Ted Sumner
Courses Plus Student 17,967 PointsPlease post the actual css code you are using.
Charlie Bradley
17,935 PointsGot 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
26,806 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
26,806 PointsHere is the code that worked ```css .main-nav li, main-nav a{ margin: 0 15px; }
Ted Sumner
Courses Plus Student 17,967 PointsYou have a typo in your css. In your padding you call main-nac a, not main-nav a.