Welcome to the Treehouse Community
Looking to learn something new?
Anthony DeGennaro430 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
Chris Hubbard2,253 Points
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
What you probably want to do is center the
<li> inside of your
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.