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
Austin Klenk
4,399 PointsWebsite overflow side to side
On the application that i am building it just started doing overflow side to side about a inch of white space the website is the width that i want.
4 Answers
Jonah Stuart
9,199 PointsThis could be any number of things. Could be playing with margins that push a 100% width element outside the bounds of the page view width limit, you may have a hidden element (something in a modal or dropdown) that might have something like this? The best thing you can do is spend some time playing around with the dev inspector tools focusing on areas you recently changed in your css and closely watching the highlight of the bounding box in the view as you hover over the html elements in the inspector.
You'll eventually find something that sticks out a little too far, and you can either adjust it's width or how it fits into the element (usually the preferred way to solve this problem) or if it doesn't compete with any of the other features or views in your application you can do an
overflow-x: hidden;
on the parent element to contain the blowout. This usually causes more complications than solve problems in the future though.
Britton Zirkle
Courses Plus Student 15,005 PointsHi Austin,
It will help if you post your html and css that you have written and maybe a link to a screen shot. That way we can see how you have coded it up and get a better idea of what is happening.
Austin Klenk
4,399 PointsCheck out the website: www.jobcomander.com
Jane Marianne Filipiak
7,444 PointsHi,
Perhaps you ought to study the box model concept for layout and how floated objects can collapse margins. I read about it on the CSS deep-dive, but all I can do is point you there. I cannot explain clearly myself.
Jane
Sameul Nasir
5,397 PointsHave you tried using the box-sizing:border-box property and use a universal selector? It might alleviate the problem.
Austin Klenk
4,399 PointsAustin Klenk
4,399 PointsI figured out what it was a navbar-right class from bootstrap, but yet still figuring out how to make it stay away from the edge.
Jonah Stuart
9,199 PointsJonah Stuart
9,199 PointsYou could just override the bootstrap default styles by using the same rule set in your primary stylesheet and making the
margin-right: 0 px;instead of -15px. But if you're not looking to overwrite bootstraps default positioning classes, you may want to check the docs for a standard float right modifier class that doesn't have the margin.