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 Jack Fitzgibbon
Jack Fitzgibbon
7,607 Points

Text shifting when resizing browser window

When you increase the size of the browser window you can see that the text and header begin to shift to the right and no longer be aligned.

When I change the padding of the sides to 50px from 5% it seems to fix the problem, the problem is also fixed when I remove the border-sizing property.

.main_container {
    max-width: 960px;
    margin: 0 auto; 
    background-color: #F7F7F7;
    padding: 30px 5%;
    box-sizing: border-box;
    border: 20px solid #EBEBEB;
}

I need another to fix the problem apart from the ones stated above.

CodePen: http://cdpn.io/azGbt

Thank you in advance.

1 Answer

MIke Legemah
seal-mask
.a{fill-rule:evenodd;}techdegree
MIke Legemah
Front End Web Development Techdegree Student 13,732 Points
MIke Legemah
.a{fill-rule:evenodd;}techdegree
MIke Legemah
Front End Web Development Techdegree Student 13,732 Points

Hey Jack, maybe try something like .main_container h1 p { css code} to manipulate just the text and header