Let's go through this section efficiently, as we did with the last one.

Look at the following:

This section contains only a title, two images, text, and a button. We'll need to create a block inside our usual container (as shown in orange).

HTML:

<section id="partners">
          
</section>

Start with our section tag and id, which we name partners:

<section id="partners">
  <div class="container">
  </div>
</section>

As usual, we'll need our div "container" to maintain our structure:

<section id="partners">
  <div class="container">
    <div class="partners-container">
    </div>
  </div>
</section>

Inside, we create another container, "partners-container":

<section id="partners">
  <div class="container">
    <div class="partners-container">

      <h2>Partners</h2>

      <div class="partners-inner">

        <div class="partner">
          <img src="img/partner1.png" srcset="img/partner1.png 1x, img/partner1@2x.png 2x">
          <p>Advan Neova Cup</p>
        </div>

        <div class="partner">
          <img src="img/partner2.png" srcset="img/partner2.png 1x, img/partner2@2x.png 2x">
          <p>JDM Style Tuning</p>
        </div>

      </div>

      <button type="button" name="button" class="btn-primary">Become a partner</button>
    </div>
  </div>
</section>

Inside our "partners-container" div we do the following:

• We put our title into an h2
• We also created another div "partners-inner" to hold our two partners images
• Inside this partner-inners div, we have our single partner div with an image and a text each
• We also added a button, outside of partners-inner but inside "partners-container"

Our CSS will look like this:

#partners {
  background-color: black;
  color: white;
  text-align: center;
  padding: 50px 0px;
}

Here are some explanation of the code: 

1. The background is black; since in the design, we have a black background
2. We can put the color:white; in the parent element so all elements inside will have the same property
3. We can do the same for text-align:center;
4. We also added some padding to the top and bottom

.partners-container {
  max-width: 400px;
  margin: 0 auto;
}

We added a max-width and margin: 0 auto; to center our partners-container. To align anything with the margin: auto method, you always need to define a width to the element:

.partners-container h2 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 60px;
}

Also, add the following CSS:

.partners-inner {
  display: flex;
  margin: 30px 0px;
}

.partners-inner .partner {
  width: 50%;
}

To be able to use display:flex;, we'll need to set the width for the child elements.

You're done for the PARTNERS section; let's save it and take a look:

Our final CSS code for the PARTNERS section is as follows:

/* PARTNERS SECTION */

#partners {
  background-color: black;
  color: white;
  text-align: center;
  padding: 50px 0px;
}

.partners-container {
  max-width: 400px;
  margin: 0 auto;
}

.partners-container h2 {
  font-family: 'built_titling', Helvetica, sans-serif;
  font-weight: 400;
  font-size: 60px;
  line-height: 1;
}

.partners-inner {
  display: flex;
  margin: 30px 0px;
}

.partners-inner .partner {
  width: 50%;
}

/* END PARTNERS SECTION */

All done! Let's move to the final step, the footer!