Banner on different pages have different heights-CodePudding

This is the result It is not meant to look like this the banner is not displayed anywhere on the website fully, some pages only displays half of the banner.

I need to work out why I don't see the banner on any of my pages, I'm trying everything.

I have a sticky banner on all but one page it doesn't work.

Now I've been going through every bit of code and I've found no joy.

window.onscroll = function() {
  myFunction()
};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

@charset "utf-8";
/* CSS Document */
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  padding-top: 20px
}

#navbar {
  overflow: hidden;
  background-color: #333;
  z-index: 100;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #04AA6D;
  color: white;
}

.content {
  padding: 30px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky   .content {
  padding-top: 60px;
}

<div >
  <p><img src="https://www.dcsit.co.uk/Assets/Banner3.png" width="100%" height="200" alt="Banner" /></p>
  <p>Contact us 07 |<a href=""> Email us</a></p>
</div>
<div id="navbar">
  <a href="index.html">Home</a>
  <a href="About.html">About</a>
  <a href="Contact.html">Contact</a>
  <a href="Computer.html">Computer</a>
  <a href="Website.html">Website</a>
  <a href="Phone.html">Phone</a> &copy;DCSIT 2022
</div>
<hr/>
<div style="height:1000px">Content</div>

CodePudding user response：

<img src="Assets/Banner3.png" width="100%" height="200" alt="Banner"/>

It looks good, but you can try to add slash and be sure that this source is correct. Capital letters matter

<img src="/Assets/Banner3.png" width="100%" height="200" alt="Banner"/>

CodePudding user response：

Remove display: flex from your body element. That messes up the entire design, pushing the banner above the top of the page on higher resolutions, because you have align-items: center on the body element as well.