Product Landing page

This challenge will not pass the test of “your #submit should be a descendant of your #form” even though it clearly is if you look at my code. Anyone know what the issue is?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <header id="header" class="header">
    <img id="header-img" src="https://cdn.pixabay.com/photo/2024/01/28/16/17/ai-generated-8537858_1280.png"/>
    <nav id="nav-bar" class="header">
       <a class="nav-link" href="">What we do</a>
      <a class="nav-link" href="">Prices</a>
      <a class="nav-link" href="">Science</a>
    </nav>
  </header>
  <body>
    <div id="outer">
      <div id="inner">
    <iframe 
  id="video"src="https://www.youtube.com/embed/kNtbNm_zN-I"></iframe>
  </div>
  </div>
  <div class="form">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
<label class="mailing-list" for="form">join our mailing list<input placeholder="email" id="email" type="email" name="email"/></label>
</div>
<div class="submit">
<input id="submit" type="submit"/>
</div>
    </form>
  </body>
  </html>

You have a closing </div> tag above your “submit” that is breaking your intended structure.

You have divided your form and submit input. If you make an element descendent to another element. You need to add it within that element. Recently you have div around your form and input.
@taktilemechanic1

when you have issues like this, try to validate your html with https://validator.w3.org/ , it’s probably something you are not seeing, but the validator should be able to catch

Im trying to get the nav bar and the logo to scroll with the viewport. Not working even though position is specified as fixed for the header which contains all of those things. Also trying to get .what-we-do .prices and .science to have space between with a flexbox on the .links which contains all of them but that is not working either. Anyone have suggestions of how I can solve this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <header id="header" class="header">
    <img id="header-img" src="https://cdn.pixabay.com/photo/2024/01/28/16/17/ai-generated-8537858_1280.png"/>
    <nav id="nav-bar" class="header">
       <a class="nav-link" href="">What we do</a>
      <a class="nav-link" href="">Prices</a>
      <a class="nav-link" href="">Science</a>
    </nav>
  </header>
  <body>
    <div id="outer">
      <div id="inner">
    <iframe 
  id="video"src="https://www.youtube.com/embed/kNtbNm_zN-I"></iframe>
  </div>
  </div>
  <div class="form">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
<label class="mailing-list" for="form">join our mailing list<input placeholder="email" id="email" type="email" name="email"/></label>
<input id="submit" type="submit"/>
</div>
<div class="links">
<div class="what-we-do">
  
</div>
<div class="prices">

  </div>
  <div class="science">

  </div>
  </div>
    </form>
  </body>
  </html>
img{
size:fixed;
width:58px;
}
#header{
  display:flex;
position:fixed;
width:100%;  justify-content:space-between;
}
#nav-bar{
display:flex;  justify-content:space-between;
padding-right:25px;
padding-top:10px;
gap:15px;
flex-wrap:wrap;
}
#video{
  width:500px;
  height:250px;
}
#outer{
  margin:0;
  padding-top:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
}
.nav-link{
font-family:'Brush Script MT', cursive, sans-serif;
font-size:20;
}
#form{
  font-family:'Brush Script MT', cursive, sans-serif;
  font-size:20;
}
.mailing-list{
  display:flex;
  flex-direction:column;
  padding-bottom:10px;
  padding-top:10px;

}
.form{
  display:flex;
  justify-content:center;
  padding-top:20px;
}
#email{
  max-width:20rem;
}
.what-we-do{
  background-color:grey;
  width:100%;
  height:20rem;
}
.prices{
  background-color:grey;
  width:100%;
  height:20rem;
}
.science{
  background-color:grey;
  width:100%;
  height:20rem;
}
.links{
  display:flex;
  justify-content:space-between;
  flex-direction:column;
}

I copied your code into my editor. Regarding the navbar it is behaving as “fixed” for me, and staying on the screen when scrolling. The only thing is that it’s transparent because you haven’t given it an image or background. Regarding the flexbox at the bottom, you haven’t given the parent container a height, so it is automatically going to be the height of the child elements combined, leaving no space for the “space-between” property value to have any effect

Okay it sounds like I may have misinterpreted what fixed means. How do I make it do the opposite and disappear up the screen when you scroll down?

Can anyone tell me why my links aren’t working? I have compared my code to my other projects where the links are working and I see absolutely no difference between them.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <header id="header" class="header">
    <img id="header-img" src="https://cdn.pixabay.com/photo/2024/01/28/16/17/ai-generated-8537858_1280.png"/>
    <nav id="nav-bar" class="header">
       <a class="nav-link" href="#what-we-do">What we do</a>
      <a class="nav-link" href="#prices">Prices</a>
      <a class="nav-link" href="#science">Science</a>
    </nav>
  </header>
  <body>
    <div id="outer">
      <div id="inner">
    <iframe 
  id="video"src="https://www.youtube.com/embed/kNtbNm_zN-I"></iframe>
  </div>
  </div>
  <div class="form">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
<label class="mailing-list" for="form">join our mailing list<input placeholder="email" id="email" type="email" name="email"/></label>
<input id="submit" type="submit"/>
</div>
<div class="links">
<div class="what-we-do">
  <text class="explanation-1">
    Each parrot is custom made to your taste and liking. If you have a preferance for parrots we have you covored. With over 10,000 different categories of parrots we have the widest selection of parrot parafernailia in the whole darn country. Come on down to parrots incorporated to get you first 1000 euros off of you custom tailored parrot. 
  </text>
</div>

<div class="prices">
  <div class="price-box">
<div calss="price-1"></div>
<div class="price-2"></div>
<div class="price-3"></div>
</div>
  </div>
  <div class="science">

  </div>
  </div>
    </form>
  </body>
  </html>

CSS

img{
size:fixed;
width:58px;
}
#header{
  display:flex;
position:fixed;
width:100%;  justify-content:space-between;
}
#nav-bar{
display:flex;  justify-content:space-between;
padding-right:25px;
padding-top:10px;
gap:15px;
flex-wrap:wrap;
}
#video{
  width:500px;
  height:250px;
}
#outer{
  margin:0;
  padding-top:100px;
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
}
.nav-link{
font-family:'Brush Script MT', cursive, sans-serif;
font-size:20;
}
#form{
  font-family:'Brush Script MT', cursive, sans-serif;
  font-size:20;
}
.mailing-list{
  display:flex;
  flex-direction:column;
  padding-bottom:10px;
  padding-top:10px;

}
.form{
  display:flex;
  justify-content:center;
  padding-top:20px;
}
#email{
  max-width:20rem;
}
.what-we-do{
  background-color:grey;
  width:100%;
  height:20rem;
}
.prices{
  background-color:grey;
  width:100%;
  height:20rem;
}
.science{
  background-color:grey;
  width:100%;
  height:20rem;
}
.links{
  display:flex;
  justify-content:space-between;
  flex-direction:column;
}
.prices{
  background:purple;
  padding-left:-160px;
  display:flex;
justify-content:space-between;
}
.what-we-do{
  padding:20px;
  position:top;
}
.science{
background:green;
}

Your anchor tags look good, but what are they linking to? Look closely at the values you put in the href attributes.

Okay it sounds like I may have misinterpreted what fixed means. How do I make it do the opposite and disappear up the screen when you scroll down?

That sounds like the default behavior, so do what you did for the rest of your document.

MDN: Linking to an element on the same page

As said, that is the default position. So just remove position fixed.

Position fixed means fixed-in-place, as in stuck to that position (the position being the offset used for left/right/top/bottom or its initial position).

Okay it was that i needed id instead of class! Thank you for your help.

Do you have any idea
1.why my text does not have any padding on the right side even though I have a universal padding (which should be effecting all sides?)
2. why the .main-content is not centering with flexbox?

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <header id="header" class="header">
    <img id="header-img" src="https://cdn.pixabay.com/photo/2024/01/28/16/17/ai-generated-8537858_1280.png"/>
    <nav id="nav-bar" class="header">
       <a class="nav-link" href="#what-we-do">What we do</a>
      <a class="nav-link" href="#prices">Prices</a>
      <a class="nav-link" href="#science">Science</a>
    </nav>
  </header>
  <body>
    <div id="outer">
      <div id="inner">
    <iframe 
  id="video"src="https://www.youtube.com/embed/kNtbNm_zN-I"></iframe>
  </div>
  </div>
  <div class="form">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
<label class="mailing-list" for="form">join our mailing list<input placeholder="email" id="email" type="email" name="email"/></label>
<input id="submit" type="submit"/>
</div>
<div class="main-content">
<div id="what-we-do" class="what-we-do">
  <text class="explanation-1">
    Each parrot is custom made to your taste and liking. If you have a preferance for parrots we have you covored. With over 10,000 different categories of parrots we have the widest selection of parrot parafernailia in the whole darn country. Come on down to parrots incorporated to get you first 1000 euros off of your custom tailored parrot. 
  </text>
</div>

<div id="prices" class="prices">
  <div class="price-box">
<div calss="price-1"></div>
<div class="price-2"></div>
<div class="price-3"></div>
</div>
  </div>
  <div id="science" class="science">

  </div>
  </div>
    </form>
  </body>
  </html>

CSS

img{
size:fixed;
width:58px;
}
#header{
  display:flex;
width:100%;  justify-content:space-between;
}
#nav-bar{
display:flex;  justify-content:space-between;
padding-right:25px;
padding-top:10px;
gap:15px;
flex-wrap:wrap;
}
#video{
  width:500px;
  height:250px;
  margin:0;
  padding:0;
}
#outer{
  margin:0;
  padding-top:35px;
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
}
.nav-link{
font-family:'Brush Script MT', cursive, sans-serif;
font-size:20;
}
#form{
  font-family:'Brush Script MT', cursive, sans-serif;
  font-size:20;
}
.mailing-list{
  display:flex;
  flex-direction:column;
  padding-bottom:10px;
  padding-top:10px;

}
.form{
  display:flex;
  justify-content:center;
  padding-top:20px;
}
#email{
  max-width:20rem;
}
.what-we-do{
  width:40rem;
  height:20rem;
  text-align:center;
  padding:20px;
  position:top;
}
.prices{
  background:purple;
  display:flex;
 width:40rem;
  height:20rem;
}
.science{
background:green;
 width:40rem;
  height:20rem;
}
.main-content{
  background-color:grey;
  display:flex;
  justify-content:center;
  flex-direction:column;
  width:40rem;
}

Can you highlight what part of the code should be doing that? I didn’t see anything glancing over it.

Justify-content aligns flex items along the main axis of a flex box. When the flex-direction is row, the main axis is left to right, so it controls the horizontal alignment. When flex-direction is column, the main axis is top-to-bottom, so justify-content controls the vertical alignment. Align-items is the property that controls alignment along the cross-axis, which is perpendicular to the main axis. Experiment with both properties when using row and column flex boxes and that should be a little more clear than my explanation.

  1. Not sure what padding you are referring to (expected or in the CSS).

  2. Centering the content and centering the container are two different things. If you give the container a width, you use an auto margin on the container to center it (or make it a flex item by given it a flex container as well). You can still center the content as well. As mentioned, it would be align-items for a column direction.

Example:

<div class="content-center">
  <div class="content">content</div>
</div>

<div class="container-center">
  <div class="content">content</div>
</div>

<div class="content-center container-center">
  <div class="content">content</div>
</div>
/* visualizer */
body > * {
  outline: 2px solid red;
  margin-block: 2rem;
}

.content-center {
  display: flex;
  flex-direction: column;
  /* content center */
  align-items: center;
}

.container-center {
  max-width: 400px;
  /* container center */
  margin-inline: auto;
}

This is the part of the code that I think should be creating a padding on the right side of the text in relation to the .main-content. it is specified padding:20px; which seems to be effecting every side of the text other than the right side.

Screenshot 2024-05-04 at 11.44.51

Okay putting a margin of auto on the .main-content which I guess is what you are referring to as the “container” worked to center the content. Still pretty confused as to why that works. Is it because the default margin is something different than auto which thereby is effecting the flexbox?

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <header id="header" class="header">
    <img id="header-img" src="https://cdn.pixabay.com/photo/2024/01/28/16/17/ai-generated-8537858_1280.png"/>
    <nav id="nav-bar" class="header">
       <a class="nav-link" href="#what-we-do">What we do</a>
      <a class="nav-link" href="#prices">Prices</a>
      <a class="nav-link" href="#science">Science</a>
    </nav>
  </header>
  <body>
    <div id="outer">
      <div id="inner">
    <iframe 
  id="video"src="https://www.youtube.com/embed/kNtbNm_zN-I"></iframe>
  </div>
  </div>
  <div class="form">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
<label class="mailing-list" for="form">join our mailing list<input placeholder="email" id="email" type="email" name="email"/></label>
<input id="submit" type="submit"/>
</div>
<div class="main-content">
<div id="what-we-do" class="what-we-do">
  <text class="explanation-1">
    Each parrot is custom made to your taste and liking. If you have a preferance for parrots we have you covored. With over 10,000 different categories of parrots we have the widest selection of parrot parafernailia in the whole darn country. Come on down to parrots incorporated to get you first 1000 euros off of your custom tailored parrot. 
  </text>
</div>

<div id="prices" class="prices">
  <div class="price-box">
<span class="price-1">Intellectual Parrot</span>
<span class="price-2">Skater Parrot</span>
<span class="price-3">Goth Parrot</span>
</div>
  </div>
  <div id="science" class="science">

  </div>
  </div>
    </form>
  </body>
  </html>

CSS

img{
size:fixed;
width:58px;
}
#header{
  display:flex;
width:100%;  justify-content:space-between;
}
#nav-bar{
display:flex;  justify-content:space-between;
padding-right:25px;
padding-top:10px;
gap:15px;
flex-wrap:wrap;
}
#video{
  width:500px;
  height:250px;
  margin:0;
  padding:0;
}
#outer{
  margin:0;
  padding-top:35px;
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
}
.nav-link{
font-family:'Brush Script MT', cursive, sans-serif;
font-size:20;
}
#form{
  font-family:'Brush Script MT', cursive, sans-serif;
  font-size:20;
}
.mailing-list{
  display:flex;
  flex-direction:column;
  padding-bottom:10px;
  padding-top:10px;

}
.form{
  display:flex;
  justify-content:center;
  padding-top:20px;
}
#email{
  max-width:20rem;
}
.what-we-do{
  width:40rem;
  height:20rem;
  text-align:center;
  padding:10px;
  position:top;
}
.prices{
  background:purple;
  width:40rem;
  height:20rem;
}
.price-box{
display:flex;
justify-content:space-between;
}
.science{
background:green;
 width:40rem;
  height:20rem;
}
.main-content{
  background-color:grey;
  display:flex;
  align-items:center;
  flex-direction:column;
  width:40rem;
  margin:auto;
}

When you give 1 value for padding property like you have, it sets that value for padding-top, padding-right, padding-bottom, and padding-left. You can set each of those properties individually, or all at once like this (assuming you wanted top, bottom and left to be 0):

/* top | right | bottom | left */
padding: 0 20px 0 0;

I think most browsers set default properties like margin, padding, font-size, etc… on most elements, so how it behaves by default can change across browsers. When both margin-right and margin-left are set to auto by you, it splits the space evenly on both sides.

So far so good.
I don’t understand why the padding and text centering is not working for the .science-text
I also don’t understand why the .form is not centering properly (its seems to be centering off from the true center) the elements are not centered down the middle they are centering on their left hand side.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <header id="header" class="header">
    <img id="header-img" src="https://cdn.pixabay.com/photo/2024/01/28/16/17/ai-generated-8537858_1280.png"/>
    <nav id="nav-bar" class="header">
       <a class="nav-link" href="#what-we-do">What we do</a>
      <a class="nav-link" href="#prices">Prices</a>
      <a class="nav-link" href="#science">Science</a>
    </nav>
  </header>
  <body>
    <div id="outer">
      <div id="inner">
    <iframe 
  id="video"src="https://www.youtube.com/embed/kNtbNm_zN-I"></iframe>
  </div>
  </div>
  <div class="form">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
<label class="mailing-list" for="form">join our mailing list<input placeholder="email" id="email" type="email" name="email"/></label>
<input id="submit" type="submit"/>
</div>
<div class="main-content">
<div id="what-we-do" class="what-we-do">
  <h1 class="what-we-do-header">What We Do</h1>
  <text class="explanation-1">
    Each parrot is custom made to your taste and liking. If you have a preferance for parrots we have you covored. With over 10,000 different categories of parrots we have the widest selection of parrot parafernailia in the whole darn country. Come on down to parrots incorporated to get you first 1000 euros off of your custom tailored parrot. 
  </text>
</div>

<div id="prices" class="prices">
  <div class="price-box">
    <div class="intelectual-parrot">
<span class="price-1">Intellectual Parrot</span>
</div>
<div class="skater-parrot">
<span class="price-2">Skater Parrot</span>
</div>
<div class="goth-parrot">
<span class="price-3">Goth Parrot</span>
</div>
</div>
  </div>
  <div id="science" class="science">
    <h1 class="science-header">Science</h1>
    <text class="science-text">
Custom Parrots inc. is based on millions of years of careful scientific study on how to manipulate the genes of parrots to become more than just parrots. We have developed a formula that can change your loving little house pet into something that can give you joy for the rest of you time on earth. Parrots are great fun but they can be even more fun when they are designed to act and smell like real human beings.  
</text>
  </div>
  </div>
    </form>
  </body>
  </html>
img{
size:fixed;
width:58px;
}
#header{
  display:flex;
width:100%;  justify-content:space-between;
}
#nav-bar{
display:flex;  justify-content:space-between;
padding-right:25px;
padding-top:10px;
gap:15px;
flex-wrap:wrap;
}
#video{
  width:500px;
  height:250px;
  margin:0;
  padding:0;
}
.what-we-do-header{
  font-size:25px;
}
#outer{
  margin:0;
  padding-top:35px;
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
}
.nav-link{
font-family:'Brush Script MT', cursive, sans-serif;
font-size:20;
}
#form{
  font-family:'Brush Script MT', cursive, sans-serif;
  font-size:20;
}
.mailing-list{
  display:flex;
  flex-direction:column;
  padding-bottom:10px;
  padding-top:10px;

}
.form{
  display:flex;
  justify-content:center;
  padding-top:20px;
}
#email{
  max-width:20rem;
}
.what-we-do{
  width:40rem;
  height:20rem;
  text-align:center;
  padding-top:10px;
  position:top;
}
.explanation-1{
  padding:10px;
}
.prices{
  background:purple;
  width:40rem;
  height:20rem;
}
.price-box{
display:flex;
justify-content:space-evenly;
}
.science{
background:green;
 width:40rem;
  height:20rem;
}
.main-content{
  background-color:grey;
  display:flex;
  align-items:center;
  flex-direction:column;
  width:40rem;
  margin:auto;
}
.science-header{
  text-align:center;
}
.science-text{
  text-align:center;
  padding:10px;
}

Yeah I don’t think ‘text’ is a valid element in html, try something else like a header or paragraph.

Your form element is centered, that doesn’t guarantee its descendants will be centered within it.

Thank you!
-So I changed the paragraphs to p1 instead of text and that did not help anything in terms of the text-align and padding until I turned on flexbox… I have no idea why. I did not think we needed flexbox for aligning and padding text. Is it because it’s inside of a div element?

-Successfully centered the email input and the text above it reading “join our mailing list” but cannot center the submit button. I have tried:
justify-content:center; with both flex directions of column and row
align-items:center; with both flex directions of column and row
neither worked. Do you know what could be the problem?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magazine</title>
    <link
      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <header id="header" class="header">
    <img id="header-img" src="https://cdn.pixabay.com/photo/2024/01/28/16/17/ai-generated-8537858_1280.png"/>
    <nav id="nav-bar" class="header">
       <a class="nav-link" href="#what-we-do">What we do</a>
      <a class="nav-link" href="#prices">Prices</a>
      <a class="nav-link" href="#science">Science</a>
    </nav>
  </header>
  <body>
    <div id="outer">
      <div id="inner">
    <iframe 
  id="video"src="https://www.youtube.com/embed/kNtbNm_zN-I"></iframe>
  </div>
  </div>
  <div class="form">
    <form id="form" action="https://www.freecodecamp.com/email-submit">
<label class="mailing-list" for="form">join our mailing list<input placeholder="email" id="email" type="email" name="email"/></label>
<input id="submit" type="submit"/>
</div>
<div class="main-content">
<div id="what-we-do" class="what-we-do">
  <h1 class="what-we-do-header">What We Do</h1>
  <p1 class="explanation-1">
    Each parrot is custom made to your taste and liking. If you have a preferance for parrots we have you covored. With over 10,000 different categories of parrots we have the widest selection of parrot parafernailia in the whole darn country. Come on down to parrots incorporated to get you first 1000 euros off of your custom tailored parrot. 
  </p1>
</div>

<div id="prices" class="prices">
  <div class="price-box">
    <div class="intelectual-parrot">
<span class="price-1">Intellectual Parrot</span>
</div>
<div class="skater-parrot">
<span class="price-2">Skater Parrot</span>
</div>
<div class="goth-parrot">
<span class="price-3">Goth Parrot</span>
</div>
</div>
  </div>
  <div id="science" class="science">
    <h1 class="science-header">Science</h1>
    <p1 class="science-text">
Custom Parrots inc. is based on millions of years of careful scientific study on how to manipulate the genes of parrots to become more than just parrots. We have developed a formula that can change your loving little house pet into something that can give you joy for the rest of you time on earth. Parrots are great fun but they can be even more fun when they are designed to act and smell like real human beings.  
</p1>
  </div>
  </div>
    </form>
  </body>
  </html>
img{
size:fixed;
width:58px;
}
#header{
  display:flex;
width:100%;  justify-content:space-between;
}
#nav-bar{
display:flex;  justify-content:space-between;
padding-right:25px;
padding-top:10px;
gap:15px;
flex-wrap:wrap;
}
#video{
  width:500px;
  height:250px;
  margin:0;
  padding:0;
}
.what-we-do-header{
  font-size:25px;
}
#outer{
  margin:0;
  padding-top:35px;
  display:flex;
  justify-content:center;
  align-items:center;
  list-style:none;
}
.nav-link{
font-family:'Brush Script MT', cursive, sans-serif;
font-size:20;
}
#form{
  font-family:'Brush Script MT', cursive, sans-serif;
  font-size:20;
}
.mailing-list{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-bottom:10px;
  padding-top:10px;

}
.form{
  display:flex;
  justify-content:center;
  padding-top:20px;
}
#email{
  max-width:20rem;
  display:flex;
justify-content:center;
}
#submit{
  display:flex;
  justify-content:center;
}
.what-we-do{
  width:40rem;
  height:20rem;
  text-align:center;
  padding-top:10px;
  position:top;
}
.explanation-1{
  padding:10px;
}
.prices{
  background:purple;
  width:40rem;
  height:20rem;
}
.price-box{
display:flex;
justify-content:space-evenly;
}
.science{
background:green;
 width:40rem;
  height:20rem;
}
.main-content{
  background-color:grey;
  display:flex;
  align-items:center;
  flex-direction:column;
  width:40rem;
  margin:auto;
}
.science-header{
  text-align:center;
}
.science-text{
  display:flex;
  text-align:center;
  padding:20px;
}

p1 isn’t a valid tag either. Have a look at an HTML reference to find an appropriate element to use.

When you set something to flex, that element becomes the flex container, and its direct descendant elements become flex items. Use justify-content and align-items on the flex container, to center the flex items. Notice that your div element, and your submit are both flex containers, but the submit is not the direct descendant of the div element, it is nested in something else that is not a flexbox. You could also center the submit without using flex, using the margin property.