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

HTML How to Make a Website CSS: Cascading Style Sheets Take a Mobile-First Approach

Arjun Singh
Arjun Singh
2,457 Points
Posted by Arjun Singh
Arjun Singh
2,457 Points

max-width vs width

wrapper {

width: 940px;
margin: 0 auto;
padding: 0 5%;
background: orange;

}

In the above css code, lets say we use width and not "max-width". I want to know why does not the padding work when I decrease the size of the window? If I decrease the size of window from right, then the padding on the right disappears completely and the part of the image gets hidden. I understand that fixed width means wrapper element will not adjust as I decrease the size of the window, but why does not padding of 5% hold? It only holds if I use max-width:940px.

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

the padding is working but since the wrapper is fixed to a width of 940px it will not scale down with the size of the window.

Raymond Gumapos
Raymond Gumapos
2,142 Points
Raymond Gumapos
Raymond Gumapos
2,142 Points

the max-width automatically adjust depends on the browser up to 940 or whatever the size you input while the other hand the width is fixed value so its does not adjust your padding on the right value. hope will help :)