Something wrong with website

Hello! I have been struggling with this for a long time now, and have to ask for help.

Look at this website:
https://hisdesign.no/MA05HTMLandCSS/MAOSUSHI.html

As you can see the text is over the header image, and I really dont know how or why, as in dreamweaver, everything looks good. Please help!
Here is mye coding:
CSS:

body nav1 {
	font-size: 2em;
    float: left;
    line-height: 1em;
    margin-bottom: 0px;
    margin-top: -20px;
    margin-left: -50px;
}
.navlist {
    list-style-type: none;
}
.navlistitem {
    float: left;
}
.navlistitem a {
    text-decoration: none;
    display: block;
    padding-left: 20px;
    padding-right: 5px;
    color: #000000;
	font-family: 'Didact Gothic', sans-serif;
    font-size: 30px;
} 
.navlistitem a:hover {
    color: #F8748A;
}
body nav2 {
	font-size: 2em;
    float: right;
    text-align: right;
    line-height: 1em;
    margin-bottom: 25px;
    margin-top: -20px;
}
body header img {
	background-size: cover;
    width: 100%;
    height: auto;
    text-align: center;
    float: center;
	margin-bottom: 5px;
}
/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: none;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: #333333;
  padding: 14px 16px;
  text-decoration: none;
  display: block;
  font-family: 'Didact Gothic', sans-serif; 
  font-size: 20px;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: none;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: white;
  color: #F8748A;
}

/* Style the active link (or home/logo) */
.active {
  background-color: none;
  color: #333333;
  font-family:'Didact Gothic', sans-serif; 
  font-size: 20px;
}
h1 {
	font-size: 35px;
	text-align: center;
	font-family: 'Istok Web', sans-serif;
}
h3 {
	padding-top: 120px;
	font-size: 35px;
	text-align: center;
	font-family: 'Istok Web', sans-serif;
}
h2 {
	text-align: center;
	font-size: 15px;
	font-style: italic;
	font-weight: 100;
	line-height: 0px;
	font-family: 'Didact Gothic', sans-serif;
}

.alignleft {
	float: left;
	margin-left: 20%;
	font-family: 'Didact Gothic', sans-serif;
	
}
.alignright {
	font-family: 'Istok Web', sans-serif;
	float: right;
	margin-right: 20%;
	font-weight: 600;	
    color: #F8748A;
}

hr {
	margin-left: 20%;
	margin-right: 20%;
	
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 25%;
  padding: 5px;
  box-sizing: border-box;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.about {
	font-family: 'Didact Gothic', sans-serif;
	font-weight: 100;
	text-align: center;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 10px;
	padding-bottom: 10px;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column2 {
  float: left;
  width: 50%;
}

/* Clear floats after image containers */
.row2::after {
  content: "";
  clear: both;
  display: table;
}
.footer{
	text-align: center;
	background-color: black;
	background-size: cover;
	color: white;
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	font-family: 'Didact Gothic', sans-serif;
	font-weight: 600;
	line-height: 13px;
	margin-top: 40px;
}

@media (max-width:830px){
  
section1 {
		display: none;
}
body nav1 {
    float: left;
    line-height: 1em;
    margin-bottom: 25px;
    margin-top: -20px;
    margin-left: -50px;
	display: none;
	}

body nav2 {
    float: right;
    text-align: right;
    line-height: 1em;
    margin-bottom: 25px;
    margin-top: -20px;
	display: none;
	}
body header img {
	object-fit: cover;
    object-position: 50% 0%;
    width: 100%;
    height: 200px;
    text-align: center;
    float: center;
    margin-bottom: 5px;
	}
 .column {
    width: 100%;
	text-align: center;
  }
h1 {
	text-align: center;
	margin-top: 10px;
}
h2 {
	text-align: center;
	font-size: 20px;
	font-style: italic;
	font-weight: 100;
	line-height: 0px;
}

h3 {
	text-align: center;
	margin-top: 10px;
}
	
.alignleft {
	float: left;
	margin-left: 10%;
}
.alignright {
	float: right;
	margin-right: 10%;
}

hr {
	margin-left: 10%;
	margin-right: 10%;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column2 {
  width: 100%;
}
}
@media (min-width:831px){
	
	.topnav{
		display: none;
	}
}

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Maosushi</title>
<link href="CSS/STLES.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Istok+Web:wght@700&display=swap" rel="stylesheet">
</head>

<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="topnav">
  <a href="MAOSUSHI.html" class="active">Mao Sushi</a>
  <!-- Navigation links (hidden by default) -->
  <div id="myLinks">
    <a href="menu.html">Menu</a>
    <a href="#contact">Book table</a>
    <a href="#about">Contact</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<script>
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>
	
	<nav1>
	<ul class="navlist">
		<li class="navlistitem"><a href="MAOSUSHI.html">Mao Sushi</a></li>
</ul> </nav1> 
	<nav2> 
	<ul class="navlist">
	<li class="navlistitem"><a href="menu.html">Menu</a></li>
	<li class="navlistitem"><a href="Booktable.html">Book table</a></li>
	<li class="navlistitem"><a href="contact.html">Contact</a></li>
	</ul> </nav2>
	
	<section1>
		<a href="https://www.tripadvisor.com">
	<img src="Images/usee/tripadvisor-01.png" width="30" height="30" alt="" hspace="20" vspace="12"/></a>
		<a href="https://www.facebook.com">
	<img src="Images/usee/facebook-01.png" width="30" height="30" alt="" hspace="20" vspace="12"/></a>
		<a href="https://www.instagram.com">
	<img src="Images/usee/instagram-01.png" width="33" height="33" alt="" hspace="20" vspace="10"/></a>
	</section1>
	
	<header><img src="Images/frontpageuse.png" alt="header"/></header>
	
<div class="about">
	<p> Sushi is Japan's national dish consisting of a mixture of rice and vinegar, along with various toppings (such as fish or shellfish). It is a common misapprehension that all sushi contains or consists of raw fish. Raw fish is a key ingredient, but are is not used in all types of sushi. Sushi can also, for example be deep-fried (tempura).</p>
</div>
	
<div class="row">
  <div class="column">
    <img src="Images/usee/nigiri-01.png" width="306.6" height="185.6" alt="" hspace="20"/>
  </div>
  <div class="column">
    <img src="Images/usee/uramaki-01.png" width="306.6" height="185.6" alt="" hspace="20"/>
  </div>
  <div class="column">
   <img src="Images/usee/gunkanmaki-01.png" width="306.6" height="185.6" alt="" hspace="20"/>
  </div>
	<div class="column">
   <img src="Images/usee/sashimi-01.png" width="306.6" height="185.6" alt="" hspace="20"/>
  </div>
</div>

<footer class="footer">
	<p>Opening Hours</p>
	<p> Monday-Friday 10:00-21:00</p>
	<p>+47 12345678</p>
	<p>contact@maosushi.com</p>
	</footer>
	
</body>

</html>

Hello !

From what I see, your header’s dimensions are : 1887x581 and your image is 1887x618. Your image’s height is greater than the header’s one.
you text begins right after the header, while the image overflows the header. Maybe if you use a overflow: hidden; in your header, it could work, or add a padding/margin top to your text with the class “about”.

I hope it’ll help !

Thank you! But it didn’t work :frowning: And I have tried to add padding/margin top in the about class, but nothing changes. So I dont really understand where the error is.

It’s weird, because I just tried it and it works. Like :

.about {
margin-top: 300px;
}

You need to add a lot of margin to see the result. It’s a trick that I use a lot.

Another solution could be sizing the header according to the image (as your image is responsive) but I don’t know how to do it, and I’m even not sure that it is possible.

Thank you! I will try again, maybe my computer is just tired or something haha

I think I’ve found something to help you !

(I’ve included spaces between https:// [space] www [space] and the rest of the URL because I can’t post links for now, I’m too new to this forum xD)
https:// www .w3schools.com/howto/howto_css_aspect_ratio.asp

You want your header to have the same size as your image. Header is 1887x581 on my screen, and the image 1887x618. But the image is responsive, so it gets smaller as the screen is smaller.
I think, according to this article, if you set the header’s width to 100% and the padding-top to : 618/1887 = 32.75%, You header will have the same size as your image, so the text should be right under the header, not over the image. Here’s the code :

header {
width: 100%;
padding-top: 32.75%;
}

I don’t have the image, so I can’t test this on my computer. It may need some manual adjustments.

Thank you so much for all the help! I got it to work, I think my computer were jut a bit slow this time!