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 Seth Barthen
Seth Barthen
11,266 Points

How to make the space on left hand side go away along with the bullet points for LI elements in a UL??

I wish I could just post a screen shot. That'd be a lot easier to explain this...

Basically I have an UL with like 4 LI inside it. I'm trying to center this as it is my nav bar for my site. I used Guil's method from his most recent forum video on centering floated elements.

When I did it I noticed it was slightly left of center screen. When I got rid of the float: left under my .main-nav li to see what was going on. It looks like it's still an UL with the font moved over to the right to make room for the bullet points. Obviously I had list-style set to none so it wasn't showing the bullet points. How the heck do you get rid of that space so it's all nice and clean?

6 Answers

Howard Slatter
Howard Slatter
8,049 Points
Howard Slatter
Howard Slatter
8,049 Points

Try this:

ul {list-style-position:inside;}

or this maybe..

ul {padding-left: 0}
Thijs Berkers
Thijs Berkers
23,038 Points
Thijs Berkers
Thijs Berkers
23,038 Points

Try margin: 0; and padding: 0; on your ul element.

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Excellent! Thanks gents! Both methods you posted work. However, I'm trying to make this nav-bar line up with the bottom of my .main-header. If you get what I mean... So I'm not sure if margin:0 padding:0 would be the best for me because I think I need to give it a margin-top: 80px; or so right? Or is there a better way to move it down.

Thijs Berkers
Thijs Berkers
23,038 Points
Thijs Berkers
Thijs Berkers
23,038 Points

Padding-left moves your font to the right. Try only adding padding-left: 0; and add your margin-top to 80px;

Howard Slatter
Howard Slatter
8,049 Points
Howard Slatter
Howard Slatter
8,049 Points

Is your nav html nested inside your header html?

Can you paste the code?

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Got it! I basically did what Thijs said before he posted it. Only this I had to do as well was add a margin-bottom: 0 so it was flush with my border of the .main-header...

Here is the code either way.. I'm not trying to make it look good or anything at this point. I'm really just trying to navigate moving elements around and making sure I understand all this. Hence the borders around the elements haha

```.main-header { min-height: 100px; text-align: center; } .main-logo h1 { margin: 15px 25px; padding: 10px; border: 2px solid black; background: blue; float: left; }

.main-nav ul { display: inline-block; border: 2px solid red; padding-left: 0; margin-top: 60px; margin-bottom: 0; list-style: none;

}

.main-nav li { border: 1px solid black; float: left; text-decoration: none; }

.main-nav li, .main-logo h1 { color: white; padding: 10px; border-radius: 5px; }```

Seth Barthen
Seth Barthen
11,266 Points

Sorry I don't know how to post the code so it looks like it's in an editor :/