Few issues with my product landing page

Hi there I’ve been slowly but surely working my way though the course. I’ve come to a bit of a conundrum so there are a few questions in this post.

First and for mostly are you no longer able to use codepen.io to do your assessments on as I can find a way to link my code from code pen to the assessment.

Secondly I’m having some trouble trying to get my "Features and Benfits section of my page to align properly as the text and image of the middle row are indented to the left and can find out how to get it to be in ling with the other two sections in that part of the page.

Thirdly how do I get my flexbox in the pricing center to be stacked on one another with equal distances in the child elements so they all look uniform

Fourthly and finally, I think this is due to my third question. But when I look at my page on code pen it is too wide and I have a horizontal scroll bar but I cant for the life of me find out how to make my page fit the designate space without going over.

Here is my code from codepen.io

<header id=header>
  <div id="header-img">
    <img id="header-img" src=https://png.pngtree.com/png-vector/20211208/ourmid/pngtree-agricultural-logo-design-png-image_4051578.png>
  <nav id="nav-bar" class="nav-box">
    <ul>
      <li class="navo"><a href="#features" class="nav-link">Features</a></li>
      <li class="navo"><a href="#works" class="nav-link">How it works</a></li>
      <li class="navo"><a href="#payments" class="nav-link">Pricing</a></li>
      <li class="navo"><a href="#contact"class="nav-link">Contact</a></li>
    </ul>
  </nav>
  </header>
<br><br>
<body>
  <h1>Top Quality Prices For Top Quality Organs</h1>
  <form id="form" action="https://www.freecodecamp.com/email-submit" method="post">
    <legend id="email" for="email">Enter email here to sign up to our mailing list:</legend>
    <input type="email" name="email" id="email" placeholder="Enter Email Here"><br><br>
    <input type="submit" for="email">
  </form>
  <br><br>
  <div class="breaker"></div>
    <br>
  <h1 id="features">Features and Benfits</h1>
  <div class="text-placement">
    <img src="https://cdn3.iconfinder.com/data/icons/emoji-81/48/58-512.png" alt="doctor">
  <h2>Premium Surgeons</h2>
    <p>Our surgeons are of the highest quality with hundreds of years of experiance combined</p>
    <img src="https://th.bing.com/th/id/R.fc4fbc18e8b291aa8740eebf67247f08?rik=cXo2kIt2SLLnNQ&pid=ImgRaw&r=0" alt="money">
    <h2>Fast Payments</h2>
    <p>We pay imidetly prior to surgery your money will be in your account before you go on the operating table. That is our guarantee!</p>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9ygAZ6nXUcv7fPTVNvo-iZni_PwG4g_z82lwuTAIllpvyrRkyI4-5lgbVQkideQZUtY8&usqp=CAU" alt="life">
    <h2>Life Guarantee</h2>
    <p>We aim for the highest quality of goods and services and with our Life Guarantee, we guarantee that in the event of any surgical misshap you will be generously compensated in proportion to the damage caused</p>
  </div>
  <br>
  <div id="works">
    <h1>How it works</h1>
    <p>You inform us of what organs you want to sell</p>
    <p>We will send you out an offer based on the current market</p>
  <p>You get the option to accept the offer and then we will book you in</p>
  <p>Come to the surgery and we will pay you prior to the surgery</p>
  </p>Once surgery is compleated we will monitor you for 48 hours after that you are free to go</p>
  </div>
<br>
<div id="payments">
<h1>Pricing</h1>
<ul class="flex-box">
  <li>Lung £250,000</li>
  <li>Kindeys £200,000</li>
  <li>Livers £150,000</li>
  <li>Bone Marrow £22,000 (per  gram)</li>
  <li>Egg £7,000 (per egg)</li>
  <li>Testicle £4,500 (per testie)</li>
  <li>Hair £1,450</li>
  <li>Eyeball £1400 (per eye)</li>
  <li>Sperm £500 (live)</li>
  <li>Blood £300 (per pint)</li>
  <li>Teath £50 (per tooth)</li>
  </ul>
</div>
<br><br>
  <video width="320" hieght="240" controls autoplay>
       <source src="https://ak.picdn.net/shutterstock/videos/1068074216/preview/stock-footage-surgeons-use-augmented-reality-vr-glasses-to-investigate-patient-lungs-status-virus-detection-d.webm" type="video/mp4">
</video>
<br><br>
<footer id="contact">
  <h1>Contacts</h1>
  <div class="footer-bar">
    <ul id="contacto">
      <li>Email: admin@harvestation.org</li>
      <li>Phone: 0151 308 4622</li>
      <li>Opening hours: Monday  Friady 0800 - 1600</li>
  </div>
</footer>
</body>
header{
  position: fixed;
  width: 100%;
  top: 0;
}
body{
  background-color: #080828;
  color: white;
  text-align: center;
}
#nav-bar{
  text-align:right;
  display: block;
}
a{
  color: white;
  padding: 20px;
  text-decoration: none;
}
.nav-box{
  background-color: #080828;
  border: 5px solid #080828;
  border-radius: 100px;
  display: block;
  padding: 5px !important;
}
.navo{
  display: inline;
  border-color: orange;
  border-radius: 5px;
  border-style: none solid none solid;
  background-color: grey; 
}
.navo:hover{
  background-color: #709080;
  max-height: 1px;
}
input[type=email]{
  width: 25em;
  text-align: center;
  height: 2em;
}
 input[type=submit] {
   width: 10em;  
   height: 3em;
    background-color: #ff0030;
    font-weight: bold;
    border: 1em solid #ff0303;
    border-radius: 1em;
}
input[type=submit]:hover {
  background-color: white;
  font-weight: bold;
  border: 1em solid white;
  border-radius: 1em;
}
legend{
  font-size: 1.1em;
  margin-bottom: 1em;
}
.text-placement{  
  justify-content: center;
  margin: auto;
  text-align: left;
  width: 40%;
}
img{
  max-height: 5em;
  width: 4em;
  text-align: left;
  float: left;
  display: inline-block;
  margin: 0em 1em 2em 1em;
}
.breaker{
  width: 50%;
  border-top: 1em dotted white;
  display: block;
  justify-content: center;
  margin: auto;
}
#payments{
  margin: auto !important;
  justify-content: center;
  display: block;
}
.flex-box{
  list-style: none;
  margin: auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-shrink: 1;
}
.flex-box > li{
  border: solid;
  margin: 1em;
  padding: 1em;
  color: black;
  background-color: white;

}
.footer-bar{
  display: solid;
  width: 100%;
  border: solid white 2em;
  background-color: white;
  color: black;
}
#contacto{
  display: block;
  text-align: right;
}

Ps I think I have used the header tag incorrectly in the project as it is just meant to hold meta data?

Thanks for your time and help much appreciated. I might take a while to reply as I am very busy most of the time and struggle to find more than 20 minutes a day to do this course.

anyone able to help with these queries?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.