You are facing a margin collapsing issue. After making the header fixed, you removed it from the flow and your form become the first in-flow element thus its top margin will collpase with the top margin of the body1. This mean that the body will have a big top margin and your fixed element will be positioned considering the body since you didn't set any top value2.
To avoid this you simply need to disable margin-collapsing (which I recommend in order to avoid other issues) or set top value to move the element where you want.
@import "https://fonts.googleapis.com/css?family=Permanent+Marker|Work+Sans|Oswald|Baloo+Bhaijaan|Roboto" ;
body {
padding-top:1px; /*disable margin-collpasing*/
}
#header{
background-color:#191919;
height:3rem;
width:100%;
position:fixed;
}
#header-img{
font-family: 'Permanent Marker', cursive;
color:white;
margin-left:1.5rem;
float:left;
font-size:25px;
}
ul{
list-style:none;
display:flex;
flow-direction:row;
justify-content:space-around;
}
#nav-bar{
background-color:#191919;
float:left;
width:100%;
}
#form{
margin-top:45rem;
margin-left:25%;
margin-right:25%;
}
img{
width:70%;
height:70%;
}
a {
text-decoration:none;
font-family: 'Work Sans', cursive;
color:white;
font-size:12px;
}
#email{
width:100%;
box-shadow:3px 3px 5px grey;
}
#submit{
font-family:'Roboto', cursive;
font-size:14px;
font-weight:bold;
color:#686868;
box-shadow:3px 3px 5px grey;
padding: 5px 5px;
}
.catalog{
margin-left:10%;
margin-right:10%;
margin-top:5rem;
width:90%;
float:left;
}
#password{
width:100%;
box-shadow:3px 3px 5px grey;
}
#video{
margin-top:5rem;
margin-left:25%;
margin-right:25%;
width:50%;
}
#courses{
display:flex;
flow-direction:row;
flex-wrap:wrap;
}
#description{
font-family: 'Oswald', cursive;
font-size: 20px;
text-align:center;
font-size:16px;
}
li{
padding: .25rem .5rem;
}
a:hover{
color:#4ba0c8;
}
.nav-link{
}
.course-label{
font-family: 'Baloo Bhaijaan', cursive;
font-size:18px;
}
.images{
margin: 5% 5%;
padding: 3% 3%;
width: 10vw;
height:10vw;
color:#d2d2d2;
}
.images:hover{
background-color:#99d3ff;
color:#99d3ff;
}
@media (min-width:555px){
#nav-bar{
float:right;
width:20rem;
margin-right:1rem;
}
#form{
margin-top:5rem;
}
}
@media (min-width:360px){
a{
font-size:16px;
}
#description{
font-size:20px;
}
#header-img{
font-size:30px;
}
#header{
height:4.5rem;
}
}
<header id="header">
<h1 id="header-img">Codexpert</h1>
<nav id="nav-bar">
<ul>
<li><a href="#">Community</a><li>
<li><a href="#courses"><b>Catalog</b></a><li>
<li><a href="#">Pricing</a><li>
</ul>
</nav>
</header>
<form id="form">
<p id="description">Get started for free</p>
<input type="input" id="email" placeholder="Enter your email"><br>
<input type="password" id="password" placeholder="Enter your password"><br>
<input type="submit" value="Submit" id="submit">
</form>
<div class="catalog">
<div>
<h2 style="color:gray;">Courses</h2>
<hr>
</div>
<div id="courses">
<div class="images">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png" alt="python">
<p class="course-label">Python</p>
</div>
<div class="images">
<img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/2f4c04f4-96d0-11e6-9830-00163ed833e7/3163796423/java-runtime-environment-screenshot.png" alt="Java">
<p class="course-label">Java</p>
</div>
<div class="images">
<img src=https://static.platzi.com/media/achievements/badge-javascript-pro-74a59d28-8f05-4ad6-bca2-e77486bf586d.png alt="JavaScript">
<p class="course-label">JavaScript</p>
</div>
<div class="images">
<img src="https://ayudawp.com/wp-content/uploads/2014/06/tag-html.png" alt="Html">
<p class="course-label">Html</p>
</div>
<div class="images">
<img src="https://hype.codes/sites/default/files/icons_for_articles/red/ruby_on_rails.png" alt="Ruby on Rails">
<p class="course-label">Ruby on Rails</p>
</div>
<div class="images">
<img src="https://www.cbronline.com/wp-content/uploads/2016/07/C.png" alt="C++">
<p class="course-label">C++</p>
</div>
</div>
</div>
<div>
<iframe width="718" height="404"
id="video" src="https://www.youtube.com/embed/UcRtFYAz2Yo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
