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

CSS Margin issue

Hello,

I have a small issue with my CSS margins, I have a section element within a wrapper div and I am trying to move the section element down from the top of the wrapper, but everytime I apply margin to the margin top of the section, it pushes the wrapper away from the top of the page?

The markup is as follows:

#wrapper {
    max-width:960px;
    margin:0 auto;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    background:#fff;
    padding-bottom:30px;
}

#list {
    margin:2.5%;
    width:95%;
}

The list section is in the wrapper, but the 2.5% margin is pushing the wrapper down from the top of the screen, I'm not sure what I'm doing wrong.

Any ideas?

Thanks!

Adam

5 Answers

If you are wanting to move the section "down" in the element, use

padding-top: 2.5%
idan ben yair
idan ben yair
10,288 Points

try to define margin-top: 2.5%;

Padding works, no luck with the margin-top though :(

Probably missing something but I don't know haha

Thanks for the help!

idan ben yair
idan ben yair
10,288 Points

lol happens.. I see you defined max-width in pixels for the wrapper and the margin in % for the list. I had bad experiences with that.. usually I just either do only % or pixels..

Suppose I could convert it, thanks for the tip :)