I can't get my header & footer to be in a fixed position on the page

Question

My header (when i open the page) is in the middle of my content, not at the top of the page, and my footer is nowhere to be found. :(

(Yes, I tried scrolling to the bottom of the page... nothing. but the header moved with me... in the wrong spot. I also tried adding some padding. Nothing. Just messes it up more.)

This is my css:

body {
  background-image: url("background.jpg");
  background-color: #FFD500;
  background-attachment: fixed;
  margin-top: 100px;
}
header {
  background: rgba(255, 0, 0, 0.2);
  position: fixed;
  border:1px solid orange;
  width: 98.45%;
}
footer {
  background: rgba(255, 0, 0, 0.2);
  position: fixed;
  border:1px solid orange;
  width:98.45%;
}

Hope this can be solved, as nothing else online has even come close to working for me!

Thank you!

Answer 1

I made some thing quick here is this what you are looking for?

.navbar{
  margin-top: -10px;
  z-index: 1;
  height: 44px;
  position:fixed;
  width: 100%;
  background: blue;
  margin-bottom: 20%;
  }
.stuff{
  padding-top: 40px;
  padding-bottom: 40px;
  position: inherit;
  height: auto;
  width:100%;
  }
.footer {
    width: 640px;
    margin: 0% -320px;
    height:44px;
    position: fixed;
    left: 50%;
    bottom: 0%;
    background: red;
}

<div class = "navbar"></div>
  <div class = "stuff">
<p>Hoodie salvia health goth, lumbersexual Bushwick leggings Tumblr viral 3 wolf moon tofu raw denim fanny pack Portland. Viral PBR hella, semiotics church-key ennui before they sold out Marfa irony migas ugh gentrify typewriter. Photo booth VHS actually, Schlitz gastropub Etsy butcher try-hard church-key. Wolf Portland wayfarers Echo Park jean shorts pickled. Banh mi paleo hella Marfa. Truffaut lumbersexual kitsch, chillwave +1 Carles Neutra McSweeney's leggings. Asymmetrical artisan typewriter polaroid cornhole listicle shabby chic ethical, single-origin coffee Portland.

Deep v asymmetrical cray +1, Intelligentsia Bushwick cornhole. Mlkshk Godard single-origin coffee you probably haven't heard of them bicycle rights. Cronut actually cred cold-pressed photo booth locavore, banjo Truffaut farm-to-table meditation beard. Keytar Schlitz occupy, polaroid messenger bag Austin 3 wolf moon cornhole Echo Park pour-over Shoreditch. Authentic whatever cred Bushwick. Meggings health goth Tumblr mustache street art. Distillery next level food truck literally bitters church-key, typewriter asymmetrical Vice Kickstarter umami sartorial gastropub.</p>
  </div>
<div class = "footer"></div>