Padding is set to 0 but there is still too much

January 30, 2023

I have a container with an h2 and h4 element in it centered on an img. I’ve set the padding to 0 and there’s still too much padding. I am very new to this so any help would be appreciated.

I have selected the div to set the padding which hasn’t worked but I have also tried to select h2 and h4 by themselves and still no joy.

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.our-mission-img {
  margin: 69px;
  height: 700px;
  z-index: 0;
  position: relative;
  width: 1200px;
}

.mission-text {
  position: absolute;
  text-align: center;
  background-color: black;
  color: white;
  width: 1200px;
  padding: 0.5px;
}

<div class="main">
  <img class="our-mission-img" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="berry-blitz">
  <div class="mission-text">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanllay Currted, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea </h4>
  </div>
</div>

>Solution :

* selects all tags and apply to all.

*{
  box-sizing: border-box;
 }

Code for it!

*{
  box-sizing: border-box;
 }

.main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
 }

.our-mission-img {
  margin: 69px !important;
  height: 700px;
  z-index: 0;
  position: relative;
  width: 1200px;
 }

.mission-text {
  position: absolute;
  text-align: center;
  background-color: black;
  color: white;
  width: 1200px;
  padding: 0.5px !important;
 }

<div class="main">
  <img class="our-mission-img" src="https://content.codecademy.com/courses/freelance-1/unit-4/img-berryblitz.jpg" alt="berry-blitz">
  <div class ="mission-text">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanllay Currted, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea </h4>
  </div>
</div>