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 Hannah Gaskins
Hannah Gaskins
14,572 Points

Making A website: Margin and Padding Issues?

While doing the Making a Website Track, I have run into something weird. Just on the portfolio page, there is spacing issues with the nav and the padding or margin on the background colors of the images. Here is a screenshot of what this looks like:

http://take.ms/cop7M

I have been looking through my code but can't seem to find anything. If there is any advice on where I might isolate my search I would greatly appreciate the help.

Thanks :)

1 Answer

Jen Ollivierre
Jen Ollivierre
929 Points

It looks like you have applied to much margin, so the menu is overflowing onto the next line. Reduce the menu margin or padding, whichever is set. When I say menu, I mean for each menu title and not the menu wrapper itself. Remember the box model maths. Padding + Margin + Border + Width = Entire Box.

What I do for my menu is to make a 100% wrapper. Make it a display: block, text-align: center. For each inside element, make it a <a href> link and apply the margin and padding to the link itself. Just remember if you apply margin and padding to an outside wrapper, it means that your inside elements have to be smaller as width has already been reduced. Maths catches a lot of people off guard when their css looks out of whack.

So for example, if you have a wrapper set to 960px. If you padding is 10px width (left + right), 10px Margin (left + right) and 2px border (left + right). That means your maximum width is 938px. A width set higher than 938px will flow outside your wrapper. In the case of content inside the box, when content can no longer fit on one line, it flows down to the next.

So lets assume that your menu words are 900px in length. If each menu have 20px margin on either side (40px total for one menu), then it means that the entire width is now 1020px, which is why it will flow onto the next line.

Hannah Gaskins
Hannah Gaskins
14,572 Points

Hi Jen,

Thanks for this answer! I found that I had added a margin to an anchor element for some reason that was throwing everything off. Here is what I had:

a { text-decoration: none; margin: 10px 20px 10px 20px; }

Then removed the margin CSS and that fixed all the funky display.

a { text-decoration: none; }

Thanks so much Jen!