Выровняйте изображения в одном ряду с фоном

Question

Я хочу выровнять свои изображения в одной строке и внутри моего класса div для заголовков, поэтому, по сути, мне нужен белый фон с круглыми границами, которые находятся за заголовками «Nike» и «Iconi» c Обувь Nike, выпущенная в начало 80-х также стояло за обоими образами обуви. Я использую HTML и CSS, есть класс div под названием NikeIntro, который используется для белого фона и обоих заголовков - кто-нибудь может помочь, пожалуйста!

body {
  background: radial-gradient( circle, rgb(175, 243, 154) 0%, rgb(142, 215, 248) 100%);
  font-family: Montserrat;
  color: black;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

.NikeIntro {
  background: #f5f5f5;
  border-radius: 20px;
  margin: 0 auto;
  padding: 100px 60px;
  max-width: 900px;
  display: block;
}

img {
  display: block;
  padding: 50px 100px;
  border-radius: 50px;
  max-width: 400px;
  margin: 0 auto;
}

.Shoes {
  border-radius: 30px;
  width: 50%;
  float: left;
}

#mainDiv {
  width: 100%;
  margin: auto;
}

<div class="NikeIntro">
  <h1>
    Nike
  </h1>
  <h2>
    Iconic Nike shoe released in the early 80's
  </h2>
</div>
<div id="mainDiv">
  <div id="divOne" class="Shoes">
    <img src="https://sneakerbardetroit.com/wp-content/uploads/2019/09/Nike-Air-Force-1-Shadow-Pale-Ivory-CI0919-101-Release-Date-4.jpg" alt="" />
  </div>
  <div id="divTwo" class="Shoes">
    <img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/001/250/original/Nike-Air-Force-1-Sage-Pink-Quartz-CW5566-100-Release-Date__1_-removebg-preview.png?1592256128" alt="" />
  </div>
</div>

Answer 1

Пожалуйста, запустите фрагмент кода, чтобы узнать, что вам нужно. Я не уверен, что понимаю ваше требование. В основном я использую flexbox для выравнивания ваших элементов.

body {
  background: radial-gradient( circle, rgb(175, 243, 154) 0%, rgb(142, 215, 248) 100%);
  font-family: Montserrat;
  color: black;
}

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

.NikeIntro {
  background: #f5f5f5;
  border-radius: 20px;
  margin: 0 auto;
  padding: 100px 60px;
  max-width: 900px;
  display: block;
  flex: 1 0 0;
}

img {
  display: block;
  /*padding: 50px 100px;*/
  border-radius: 50px;
  max-width: 400px;
  margin: 0 auto;
  width: 100%;
}

.Shoes {
  border-radius: 30px;
  display: flex;
  align-items: center;
  /*width: 50%;
  float: left;*/
}

#mainDiv {
  width: 100%;
  margin: auto;
  display: flex;
}

#divOne {
  flex: 1 0 0;
}

#divTwo {
  flex: 1 0 0;
}

<div id="mainDiv">
  <div id="divOne" class="Shoes">
    <img src="https://sneakerbardetroit.com/wp-content/uploads/2019/09/Nike-Air-Force-1-Shadow-Pale-Ivory-CI0919-101-Release-Date-4.jpg" alt="" />
  </div>

  <div class="NikeIntro">
    <h1>
      Nike
    </h1>
    <h2>
      Iconic Nike shoe released in the early 80's
    </h2>
  </div>


  <div id="divTwo" class="Shoes">
    <img src="https://s3.amazonaws.com/shecodesio-production/uploads/files/000/001/250/original/Nike-Air-Force-1-Sage-Pink-Quartz-CW5566-100-Release-Date__1_-removebg-preview.png?1592256128" alt="" />
  </div>
</div>