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

Strange White Space on Left Side of Nav Bar

Hello all, I've been working on a quick code for a website design I've been toying around with. Everything seems to be working perfectly except my fixed navigation bar has this strange little white gap on the left side before it starts. I've looked over my code quite a bit and cannot figure out what is causing this strange gap, since the width of the nav bar should be 100% of the window.

Here's the Code Pen with the current code: http://codepen.io/anon/pen/sLvgh

The Code Pen is obviously missing two of the images, but inserting them and removing them had no effect on the nav bar. If you look, the black nav bar has this small white space on the left before it begins. Any ideas what is going on here?

2 Answers

John Locke
John Locke
15,479 Points

Add

    body { margin: 0; }

and you should be fine.

Wow >.<

Thank you very much!

James Barnett
James Barnett
39,199 Points

Scott Sheldon - You actually don't have any problem at all. This sort of issue is taken care by normalize.css. However since you didn't link it correctly in your codepen it wasn't working.

Agreed. Some Reset or Normalize CSS will clear this up. In fact, in your CodePen example I just went in and clicked on "Reset" in the options....nav bar moved right over (well technically it went left)....but you get it.

James Barnett
James Barnett
39,199 Points

Yep that's what I did too.