content overlapping with flexbox header - how to avoid - html

Question

CSS styles for my menu bar
* {
margin: 0;
padding: 0;
}
body {
background: white;
font-family: 'Helvetica Neue', Helvetica;
font-weight: 400;
font-size: 1.05em;
line-height: 1.6rem;
color: white;
font-size: 1.2em;
}
header {
position: fixed;
background: #d777ea; /*light purple*/
width: 100%;
display: block;
}
header > nav > ul {
display: flex;
margin: 0;
padding: 0;
justify-content: flex-start;
list-style: none;
flex-wrap: wrap;
}
header > nav > ul > li {
margin: 0;
flex: 0 1 auto;
position: relative;
transition: 0.2s;
cursor: pointer;
}
header > nav > ul > li:hover {
background: #aa64e0; /*dark purple*/
}
header > nav > ul > li > ul {
/* dropdown */
position: absolute;
background: #76a1e8; /*light blue*/
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
header > nav > ul > li:hover > ul {
/* dropdown */
display: block;
width: 220px;
}
header > nav > ul > li > a {
color: white;
display: flex;
font-size: 1.5rem;
text-decoration: none;
padding: 1rem 1.5rem;
letter-spacing: 1px;
}
header > nav > ul > li > ul > li {
display: block;
}
header > nav > ul > li > ul > li > a {
text-decoration: none;
color: white;
display: flex;
letter-spacing: 1px;
cursor: pointer;
padding: .25rem 1.5rem;
}
header > nav > ul > li > ul > li:hover {
background: blue;
}
header > nav > ul > li > a > i {
margin-left: 5px;
}
input {
padding: .25rem;
width: 100px;
}
input:invalid {
border: 2px solid red;
}
header > nav > ul > li > ul > li > input:invalid + button {
background: red;
cursor: not-allowed;
}
button {
padding: .25rem;
}
HTML header and an image
<header>
<nav>
<ul>
<li>Teams<i class="fas fa-caret-down"></i>
<ul>
<li><a class="preset-id" data-schoolid=13318>Huron</a> </li>
<li><a class="preset-id" data-schoolid=99999>Pioneer</a></li>
<li>
<input type="number" min="1" max="100000" class="custom-id-value" placeholder="School ID #" required>
<button class="custom-id"> Go </button>
</a>
</li>
</ul>
</li>
<li><a class="show-calendar">Calendar</a></li>
<li><a class="show-athletes">Athletes</a></li>
</ul>
</nav>
</header>
<main>
<image src="https://www.w3schools.com/w3css/img_lights.jpg"></image>
</main>
When it shows up,
The content is on top of the header bar. Is there some way to avoid this? and have the content displayed below? When the dropdown is activated, I don't want the content below it to move though.
JsFiddle: https://jsfiddle.net/g870xy3d/36/

Answer 1

You just need to add a margin top in the main tag with the height of the header. Also add top:0 to the header:
header{
top:0;
position: fixed;
background: #d777ea; /*light purple*/
width: 100%;
display: block;
}
main{
margin-top: 57px;
}