How do I make these paragraphs the same width as the video?

https://codepen.io/gtrman97/pen/jOVpzLw

Change your width to a suitable length, which is less than 100% of course and you forgot to add semi-colons on the end of your code in the CSS .info class. may I also ask, why did you change your whole document to flex? Maybe that could also be part of the problem, or not!

When I change it less than 100% the text shifts to the left margin and doesn’t center.

Didn’t I do that with

body {
  display: flex;

?

Ohhhhh, I think you meant the text below! :laughing:

For that, increase the width of the input by adding a width property and setting it to whatever width you want, you want it to be responsive so try using percentages (%). Here’s the code for it:

HTML

<html>
  <head>
    <title>Product Landing Page</title>
  </head>
  <body>
    <header id="header">
      <img src="https://lancasterfarmfresh.com/wp-content/uploads/2019/05/Organic-Seal-small-150x150.png" id="header-img" alt="USDA Organic Logo"> 
      <nav id="nav-bar">
        <a href="#about-us" class="nav-link">About Us</a> |
        <a href="#how-it-works" class="nav-link">How It Works</a> |
        <a href="#pricing" class="nav-link">Pricing</a>
      </nav>
    </header>
    <h2 id="about-us">About Us</h2>
    <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tempor commodo ullamcorper a lacus vestibulum sed arcu. Egestas diam in arcu cursus euismod quis viverra. Ut morbi tincidunt augue interdum velit. Ultrices in iaculis nunc sed augue lacus viverra. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Nulla at volutpat diam ut venenatis. Amet tellus cras adipiscing enim eu turpis egestas. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Pretium vulputate sapien nec sagittis. Risus quis varius quam quisque id. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare. Viverra tellus in hac habitasse. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Sed libero enim sed faucibus turpis in. Aliquet eget sit amet tellus. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit.</p>
    </div>
    <h2 id="how-it-works">How It Works</h2>
    <div class="info">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tempor commodo ullamcorper a lacus vestibulum sed arcu. Egestas diam in arcu cursus euismod quis viverra. Ut morbi tincidunt augue interdum velit. Ultrices in iaculis nunc sed augue lacus viverra. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Nulla at volutpat diam ut venenatis. Amet tellus cras adipiscing enim eu turpis egestas. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Pretium vulputate sapien nec sagittis. Risus quis varius quam quisque id. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare. Viverra tellus in hac habitasse. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Sed libero enim sed faucibus turpis in. Aliquet eget sit amet tellus. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit.
    </p>
    </div>
    <h2 id="pricing">Pricing</h2>
    <div class="info">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tempor commodo ullamcorper a lacus vestibulum sed arcu. Egestas diam in arcu cursus euismod quis viverra. Ut morbi tincidunt augue interdum velit. Ultrices in iaculis nunc sed augue lacus viverra. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Nulla at volutpat diam ut venenatis. Amet tellus cras adipiscing enim eu turpis egestas. Massa id neque aliquam vestibulum morbi blandit cursus risus at. Pretium vulputate sapien nec sagittis. Risus quis varius quam quisque id. Pulvinar mattis nunc sed blandit libero volutpat sed cras ornare. Viverra tellus in hac habitasse. Feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Sed libero enim sed faucibus turpis in. Aliquet eget sit amet tellus. Lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit.
    </p>
    </div>
        <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/0uBz5RZT71U" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <form id="form" action="https://www.freecodecamp.com/email-submit">
      <label id="email-label">Email:             </label>
      <input type="email" id="email" name="email" placeholder="Enter your Email" required>
      <input type="submit" id="submit" value="Submit">
    </form>
  </body>
</html>

CSS

html {
  scroll-behavior: smooth; 
}
body {
  
  display: flex; 
  flex-direction: column; 
  background: linear-gradient(5deg, yellow, green); 

}
#nav-bar {
  background-color: green; 
  position: fixed; 
  padding-top: 10px; 
  top: 0; 
  left: 0; 
  width: 100%; 
}
#header-img {
  padding-top: 35px; 
}
.info {
  text-align: center; 
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px; 
}
#video {
  margin: auto;  
  max-width:100%; 
}
#email {
  margin: 10px; 
  width: 32%;
  padding: 12px;
  font-size: 16px;
}
#submit {
  cursor: pointer;
  display: block; 
  margin: auto;
  width: 20%;
  padding: 4px;
  font-size: 15px;
}
@media (min-width: 600px) {
  body {
    background-color: lightblue;
    text-align: center; 
  }
}

#email-label {
  font-size: 20px;
}

Oh lemme fix that:

Change your .info class to be:

.info {
  margin: auto;
  text-align: center; 
  width: 50%;
  margin-bottom: 10px;
  padding-bottom: 10px; 
}

I like the way your website looks though! Well done! :clap:t5:

Do you play guitar?

Thanks! Yes been playing for almost 20 years.

1 Like

Whoa cool! :open_mouth:

I started learning how to play it this year :laughing:
How did you learn to play the guitar?

I’m reading Guitar All-in-One for Dummies.

That’s cool! :+1:t5:

Sorry I had to delete my last message.
I pasted the iframe inside the last div which has class info and update the width of the <iframe to 100% and removed the height but added a style style=“aspect-ratio: 4/2.5”