CODEWITHSUNDEEP
htmlcss
Diego Claudiu
Diego Claudiu

Reputation: 334

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

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
            >
            <a href="#" class="btn btn--outline">Learn more &darr;</a>
            <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;
}

Upvotes: 0

Views: 222

Answers (1)

Martin
Martin

Reputation: 2414

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.

Upvotes: 2

Related Questions