Help With Product Landing Page CSS

Help With Product Landing Page CSS
0

#1

Hey all.

Currently putting CSS touches on my landing page submission, but can’t seem to get my p elements to align underneath my h2 elements, like how the sample looks like

Here’s what mine looks like

and here’s the link to the CodePen. Full code is below as well.

Thanks in advance.

<html>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<div id=header>
    <img src="http://www.free-icons-download.net/images/lightning-bolt-logo-icon-76715.png" alt="Lightning" id="header-img">
  <h1>Lightning-Fast Muay Thai Gloves</h1>
<nav id="nav-bar">
<a href="#glove" class="nav-link" id="a-glove">Why this glove?</a>
<a href="#features" class="nav-link" id="a-features">Features</a>
<a href="#pricing" class="nav-link" id="a-pricing">Pricing</a>
  </nav>
</div>

<div id="container-big">
  <div id="glove">
  <div id="leather">
    <img src="https://png.icons8.com/ios/1600/leather-filled.png" alt="leather" id="leather-img">
  <h2>Authentic Leather</h2>
  <p>Leather that won't crack and endure even the harshest blows. Straight from Phuket province.</p> 
    </div>
    <div id="science">
<img src="https://cdn3.iconfinder.com/data/icons/pixomania/128/science-512.png" alt="science" id="science-img"> 
  <h2>Aerodynamically Tested</h2>
  <p>Gloves that have been tested time and time again to ensure the fastest strike. Testers may have been injured in the process.</p>
    </div>
    <div id="sewing">
  <img src="https://cdn2.iconfinder.com/data/icons/eldorado-appliance/40/sewing_machine-512.png" alt="sewing" id="sewing-img">
  <h2>Hand-made</h2> 
  <p>Each and every glove is made in our Bangkok factory from scratch. That's the only way to make sure we deliver what we promise.</p> 
</div>
  </div>

<div id="features"> 
  <h2>In-Depth Look</h2>
  <iframe id="video" width="600" height="400" src="https://www.youtube.com/embed/xo2xuNYKO0I" frameborder="0" allowfullscreen></iframe>
</div>

<div id="pricing">
  <h2>Pricing</h2>
  <p>$49.99. And if it doesn't last you 36 months...we'll give you a full refund.</p>
</div>

<div id="close">
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    Take your bouts to the next level: <br>
    <input id="email" type="email" placeholder="Email" name="email">
    <input id="submit" type="submit">
  </form>
</div>
</div>
</html>

<style>
* {
  font-family: Arial;
}

@media (max-width: 768px) {
  * {
  font-family: Tahoma;}
}

#header {
  position: fixed;
  width: 100%;
  display: flex;
  top: 0;
}
#header img {
  height: 75px;
  width: 75px;
  margin-top: -10px;
}
#header h1 {
  font-size: 23px;
  margin-left: -20px;
}
#header nav {
  margin-left: 730px;
  margin-top: 15px;
}
#header a {
  color: black;
  text-decoration: none;
}
#a-glove {
  margin-right: 10px;
}
#a-features {
  margin-right: 10px;
}
#a-pricing {
  margin-right: 10px;
}

#container-1 {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#glove {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 150px;
  margin-left: 100px;
}
#glove img {
  height: 150px;
  width: 150px;
}
#glove h2 { 
}
#glove p {
  margin-top: 60px;
  margin-left: -180px;
  align: left;
}
#leather {
  display: flex;
  flex-direction: row;
}
#science {
  display: flex;
  flex-direction: row;
}
#sewing {
  display: flex;
  flex-direction: row;
}
</style>