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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Anthony DeGennaro
Anthony DeGennaro
430 Points
Posted by Anthony DeGennaro
Anthony DeGennaro
430 Points

How in the WORLD do you center a <ul> inside a <div> like in this lesson????

I decided to make a little test site to test the stuff taught so far, and when I tried to center my ul inside my div, like shown in the video, it would not work, someone please help before I actually tear my bloody hear out.

My HTML = http://pastebin.com/4vZU14Vy

My CSS = http://pastebin.com/KwgUWTK8

The CSS reset I'm using = http://pastebin.com/2qjKq2p0

2 Answers

Chris Hubbard
Chris Hubbard
2,253 Points
Chris Hubbard
Chris Hubbard
2,253 Points

Anthony,

Unless you have specified otherwise (and I don't see any indication to that in your CSS) the <ul> inside your <div> is going to have a display: block; property, which means it is going to take up the width of its parent element (your <div>)

What you probably want to do is center the <li> inside of your <ul>

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Anthony,

The reason the gallery was centered was because each list item was 45% and this leaves 10% extra space. Nick made the margins 2.5% all around. 2.5% for left and right on each gallery item made up the 10%

You have used 43% which leaves 14% left over and then you have a 30px right margin. The extra space you see on the right is whatever is leftover from that 14%.

Generally if you have fluid elements then you want to have a fluid margin. In your case, you could make the margins 3.5% on both sides and that would add up to 14%.

Also, you have a border around your li's which gets added on to the 43%. This will make everything come to more than 100%.

You can use border-sizing: border-box; on the li's to have the border be part of the 43% width.