I'm currently in the process of developing my latest portfolio website at and I'm facing a perplexing padding dilemma that has left me stumped. The approach I'm taking with the layout involves each row of content consisting of both an outer wrapper and an inner wrapper. To illustrate, consider the following structure:
<header class="global-header" role="banner">
<div class="header-inner">...</div>
</header>
The outer wrapper spans 100% of the width while the inner wrapper adheres to a maximum-width constraint, centrally aligned using margin auto. Additionally, the inner wrapper incorporates a percentage-based padding to enable content adjustment within each row, as demonstrated in the header example above. Here's a glimpse into my SCSS code for clarity:
.global-header {
background: #007bc4;
text-align: center;
text-shadow: 0 1px 1px rgba(#000, 0.2);
border-bottom: 1px solid rgba(#000, 0.15);
padding: 1.25em 0.625em 2.5em;
@include at-break($breakMedium) {
padding: 3.125em 1.25em 6.25em;
}
@include at-break($breakLarge) {
padding: 3.125em $gutter 6.25em;
}
}
.header-inner {
max-width: $maxWidth;
margin: 0 auto;
@include at-break($breakSmall) {
margin: 0 18.181818181818%;
}
@include at-break($breakMedium) {
margin: 0 11.764705882353%;
}
@include at-break($breakLarge) {
margin: 0 17.391304347826%;
}
}
The issue arises when the percentage-based padding on the inner wrapper continues to expand even after reaching the designated max-width limit. This raises a question as to why the padding on the inner wrapper persists in growing alongside the viewport width despite achieving the specified max-width.