max-width style applies differently, different values but same width - html

Question

I am trying to apply a max-width to 2 different section and they seem to have the same width although the values are different. I have checked for padding but cannot see what would cause this.
I 've included the code below, as you can see .hero max-width is different from .container but still they're both 1280px in width.
Any help is appreciated, cheers!
<section class="section-hero">
<div class="hero">
<div class="hero-text-box">
<h1 class="heading-primary width-58rem">
A healthy meal delivered to your door, every single day
</h1>
<p class="hero-description">
The smart 365-days-per-year food subscription that will make you
eat healthy again. Tailored to your personal tastes and
nutritional needs.
</p>
<a href="#" class="btn btn--full margin-right-sm"
>Start eating well</a
>
Learn more ↓
<div class="delivered-meals">
<div class="delivered-imgs">
<img src="img/customers/customer-1.jpg" alt="customer photo" />
<img src="img/customers/customer-2.jpg" alt="customer photo" />
<img src="img/customers/customer-3.jpg" alt="customer photo" />
<img src="img/customers/customer-4.jpg" alt="customer photo" />
<img src="img/customers/customer-5.jpg" alt="customer photo" />
<img src="img/customers/customer-6.jpg" alt="customer photo" />
</div>
<p class="delivered-text">
<span>250,000+</span> meals delivered last year!
</p>
</div>
</div>
<div class="hero-image-box">
<img
src="img/hero.png"
alt="Woman enjoying food, meals in storage container and food bowls on a talbe"
/>
</div>
</div>
</section>
<section class="section-how">
<div class="container grid grid--2-cols">
<div>Test 1</div>
<div>Test 2</div>
<div>Test 3</div>
<div>Test 4</div>
</div>
</section>
.hero {
max-width: 150rem;
margin: 0 auto;
padding: 0 3.2rem;
display: grid;
align-items: center;
grid-template-columns: repeat(2, 1fr);
gap: 9.6rem;
}
.container {
max-width: 140rem;
margin: 0 auto;
padding: 0 3.2rem;
}

Answer 1

The reason why both elements reaches the same width, even though you defined different max-widths for your case, is because you are never actually reaching any of the max-width cases in order for the style to come into effect.
You mention that both elements have a width of 1280px. Note that your CSS definitions for max-width is using rem units. rem is usually calculated by a base of 16px (as default), meaning that 1280px is equal to 80 rem. You never reach the 140-150rem case. 140 rem equals to 2240px.