Why does margin-top move my header which is position: fixed? whenever I put a margin on my <main&-CodePudding

I want the header which is position:fixed to not move when I put a margin on the #main section. I have seen to try and add padding to the top element, but that did not help. I even tried giving the #email-section some top-margin, but that did not work either. It's almost like the header and main elements are attached. I am a self-taught and self-learning website developer. I'm sorry if this does not make sense. I will try and help you out with any information you want to know about the code. Thank you.

body {
  background: url(marble_background_backup.jpg);
}

header {
  position: fixed;
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
}
header #header-img {
  width: 100px;
  margin-left: 20px;
}
header h1 {
  font-family: "Abril Fatface";
  font-size: 42px;
  margin-left: 2%;
  width: 60%;
}
@media (max-width: 1550px) {
  header h1 {
    width: 40%;
  }
}
header li {
  display: inline;
  font-size: 30px;
  font-weight: 500;
  font-family: "Abril Fatface";
}
header li a {
  text-decoration: none;
  color: brown;
}

#main {
  width: 100%;
  margin-top: 100px;
}
#main #email-section {
  width: 20%;
  margin: 0 auto;
  text-align: center;
  font-family: "Bebas Neue";
  font-size: 30px;
}
#main #email-section h2 {
  margin-bottom: 0px;
  letter-spacing: 0.05em;
}
#main #email-section input {
  width: auto;
  margin: auto;
  font-size: 20px;
  margin-top: 15px;
  border: 3px solid brown;
  color: brown;
  border-radius: 5px;
  display: block;
}
#main #email-section input[type=submit] {
  background-color: lightyellow;
}
#main #email-section input:hover, #main #email-section input:focus {
  background-color: blanchedalmond;
}

#facts {
  display: flex;
  flex-direction: column;
  width: 50%;
  margin: 8% auto 0 auto;
  font-size: 28px;
}
#facts .facts-boxes {
  display: flex;
  flex-direction: row;
  margin: 3%;
}
#facts .facts-boxes img {
  width: 100px;
  margin-right: 5%;
}
#facts .facts-boxes #bean-pic {
  border-radius: 50%;
}
#facts .liner {
  width: 50%;
  height: 6px;
  background-color: brown;
  margin: 0 0 0 auto;
  padding: 0;
  transform: skewX(-40deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/styler.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Abril Fatface&family=Pacifico&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bebas Neue&display=swap" rel="stylesheet">
    <title>Lion's Club Product Page</title>
</head>


<body>
    <header>
        <img id='header-img' src="lion1.png">
        <h1>Lions Club Coffee House</h1>

        <ul>
            <li><a href="#">|&nbsp;&nbsp;&nbsp;Learn</a></li>
            <li><a href="#">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;Pricing</a></li>
            <li><a href="#">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;About&nbsp;&nbsp;&nbsp;|</a></li>
        </ul>

    </header>

    <main id="main">
        <section id="email-section">
            <h2>Know where your coffee comes From</h2>
            <form action="#">
                <input type="email" id="email" placeholder="Enter your email">
                <input type="submit" id="submit" value="keep me informed">
            </form>
        </section>

        <section id="facts">
            <div ><img src="/plant.svg" alt="plant picture"><h3>Ethically sourced from trusted coffee farms</h3></div>
            <hr >
            <div ><img src="/coffee_bean.jpg" id="bean-pic"><h3>New Varieties Weekly</h3></div>
            <hr >
            <div ><img src="/trophy.svg"><h3>Trained Baristas inhouse</h3></div>
            <hr >
            <div ><img src="/medal_first.svg"><h3>Quality Unmatched</h3></div>
            <hr >
        </section>

CodePudding user response：

set top:0; to your header

it will probably fixed, if not try adding another element with same height as your header... an empty div can help and it won't be visible because it will be under header only works as you want

CodePudding user response：

The fixed <header> element is getting its default position based on the layout of the page (which includes the margins). If you want to explicitly specify its position, you can just do:

header {
   top: 0;
}