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

Matt Campbell
Matt Campbell
9,767 Points
Posted by Matt Campbell
Matt Campbell
9,767 Points

Rogue margin down right hand side of page?

Hi folks,

I'm writing a page using just HTML and CSS at the moment. Haven't completed the JS stages quite yet.

I haven't had this before but this page is acting up.

Down the entire right hand side of the page there is a margin like a gutter and I don't know where it's come from or how to get rid of it.

I've checked things like floats and padding that could possibly be escaping the container if that's possible, but nothing is showing up as a possible cause.

I have all the standard stuff setup like clearfix and normalize, using a grid setup with margins at 0, max-width on 100% and height at auto. Floats do nothing.

The page looks absolutely fine in browser but there is a bottom scroll bar allowing access to this rogue whitespace on the right of the page.

Any help for a novice would be huge!

Thanks.

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Matthew - Can you post your code on codepen.io, so we can see the bigger picture.

Matt Campbell
Matt Campbell
9,767 Points
Matt Campbell
Matt Campbell
9,767 Points

Here's the link to codepen.

http://codepen.io/Th3M8dH8tt3r/pen/hIorC

As you can see, where the blue to black gradient is, from there up to the top of the page on the right side is this rogue margin.

EDIT: I have resolved the issue by reducing the width of a couple of divs. class grid16 is set to 100% but overruns the natural page. Tweaked grid15 class to match the page's width(93.75%) and everything is hunky dory. I don't know if this is good practice or not but it has worked. If someone can tell me otherwise, would be appreciated