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

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points
Posted by Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

How can I remove this white space -right side???

http://codepen.io/tushar_13/full/LNVvKV/

I know it's not perfect and I am literally violating the DRY concept, but I am working on it.

But, I have 2 problems at this point. 1) right side...white space....how can I remove it?? 2) How can I add back to top glyphicon at the bottom right of contact page??should I use position: absolute??

Healthy criticism is most welcome, I am trying hard but position property and :before and :after pseudo elements are still not clear?? What should I do?

3 Answers

Kai Nightmode
Kai Nightmode
37,045 Points

For the horizontal scrolling issue / right side white space.

Found the issue using the Chrome inspector when poking the DIV with a class of row inside the DIV with a class of page-2.

<div class="page-2">
    <div class="row" id="about-me">
    ...

The particular CSS that is causing the issue is...

.row {
    margin-right: -15px; /* this is the exact culprit */
    margin-left: -15px;
}

There are multiple solutions but one of the easier fixes would be to add the following CSS.

.page-2 {
    overflow: hidden;
}

Cheers!

Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Thanks a lot... But I din't actually used that .row class...Is it the part of a bootstrap row class..i mean those negative margins?? If it is...How come my other pages were fine, not a problem there....why particularly this About section?

Kai Nightmode
Kai Nightmode
37,045 Points

Sure thing. ^_^

Looks like the other pages have DIVs with a class of container. Those container classes specify 15 px padding on both sides which is probably why a row class trying to use negative margins of 15px is contained by them.

Oh and the about page section is the only section without a container DIV compared to the others.

Billy Bellchambers
Billy Bellchambers
21,689 Points
Billy Bellchambers
Billy Bellchambers
21,689 Points

Hi there,

I've had a look at your site and am struggling to see the white space you have mentioned. If your referring to the background image towards the top of the page the white space there is part of the image. You could crop the image down to remove the white space if this is the issue.

As for the return to top button in contact page. Absolute positioning would work but you could also create your <a> element to be the width of the page and align the text to the right this will prevent content overlapping the link to the left also. Depends on the result you require.

Hope this helps.

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points
Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Ok be a harsh critic now!!

Tell me what I did wrong and what I need to learn??? I am a newbie(mechanical engg.) no background of coding and can use some help.