Removing White Space each div element - html

Good day guys,
As you can see in the image they are stick to each other in desktop view, however on the real code I wasn't been able to do it, I tried to use the overflow but the result is not what I expected. Heres my code https://jsfiddle.net/Jury/0bqpLw1h/1/.. Thank you so much for your help
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>


* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: absolute;
border-radius: 50%;
width: 100%;
height: 50rem;
background-color: #6CA9A5;
z-index: 1;
margin: 0;
margin-top: -75%;
}
.about {
height: 100vh;
width:100%;
background-color: crimson;
z-index: 3;
position:absolute;
/*bottom : 0;*/
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>


Small changes in the css can make the image like look. Just make a small change in .about. and this will work. output of the below code
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}


I have made some changes along with some brief explanation to the CSS file, in particular, the .content and .circle selector. Best viewed in desktop environment.
Fiddle


Just add this style before your media query also you check it on this fiddle https://jsfiddle.net/v8r463je/
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
Output here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: relative;
border-radius: 50%;
width: 50rem;
height: 50rem;
background-color: #6CA9A5;
margin: 10rem auto;
z-index: 1;
}
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>

Related

How do I move my hamburger in css and still have it functional?

So i have made a website with HTML and CSS. It has different effects like the parallax effect(a very simple version of it), transparent navbar, and now I am trying to make my Navbar responsive. Everything works, but my hamburger menu is very far to the left and when I find a way to move it, it doesnt work after i moved it.
As you can see it is very close to the top of the screne and so far to the left that it is past the logo. I want it to stay to the right even if i made the screen smaller ofr bigger, like it moves with the screen when i move it.
This is my css code:
#font-face {
font-family: 'Poppins';
src: url(Fonts/Poppins-Regular.ttf
}
#font-face {
font-family: 'Comfortaa';
src: url(Fonts/Comfortaa-VariableFont_wght.ttf);
}
#font-face {
font-family: 'DancingScript';
src: url(Fonts/DancingScript-VariableFont_wght.ttf);
}
* {
padding: 0;
margin: 0;
color: #A6808C;
box-sizing: border-box;
}
body {
background-color: #565264;
font-family: Poppins;
}
html {
overflow: scroll;
overflow-y: hidden;
}
::-webkit-scrollbar {
width: 0%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
padding: 10px 90px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.4);
border-bottom: 0px solid #fff;
z-index: 9999
}
nav .logo {
padding: -22px 20px;
height: 50px;
float: left;
}
nav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
nav ul li a {
line-height: 60px;
color: #fff;
padding: 12px 30px;
text-decoration: none;
font-size: 25px;
}
nav ul li a:hover {
background: rgba(0,0,0,0.1);
border-radius: 5px;
}
.text {
font-size: 2rem;
padding: 2rem;
background-color: #565264;
color: whitesmoke;
}
.title {
font-size: 7rem;
color: whitesmoke;
text-shadow: 0 0 5px black;
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
transform: translateZ(-10px) scale(3);
background-repeat: no-repeat;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
transform-style: preserve-3d;
z-index: -1;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
.hamburger {
position: relative;
width: 30px;
height: 4px;
background: #fff;
border-radius: 10px;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hamburger:before, .hamburger:after {
content: "";
position: absolute;
height: 4px;
right: 0;
background: #fff;
border-radius: 10px;
transition: 0.3s;
}
.hamburger:before {
top: -10px;
width: 20px;
}
.hamburger:after {
top: 10px;
width: 20px;
}
.toggle-menu {
position: absolute;
width: 30px;
height: 100%;
z-index: 3;
cursor: pointer;
opacity: 0;
}
.hamburger, .toggle-menu {
display: none;
}
.navigation input:checked ~ .hamburger {
background: transparent;
}
.navigation input:checked ~ .hamburger::before {
top: 0;
transform: rotate(-45deg);
width: 30px;
}
.navigation input:checked ~ .hamburger::after {
top: 0;
transform: rotate(45deg);
width: 30px;
}
.navigation input:checked ~ .menu {
right: 0;
box-shadow: -20px 0 40px rgba(0,0,0,0.3);
}
#media screen and (max-width: 1062px) {
.hamburger, .toggle-menu {
display: block;
}
.header {
padding: 10px 20px;
}
nav ul {
justify-content: start;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
right: -300px;
background-color: #565264;
width: 300px;
height: 100%;
padding-top: 65px;
}
.menu li {
width: 100%;
}
.menu li a, .menu li a:hover {
padding: 30px;
font-size: 24px;
box-shadow: 0 1px 0 rgba(112,102,119,0.5) inset;
}
}
<head>
<meta charset="utf-8">
<meta name="veiwport" content="width=device-width, initalscale=1.0">
<Title>Test</Title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<nav>
<div class="logo">
<a href="index.html">
<img src="Pictures\Logo DesignK whitegreen.png" alt="DesignK" height="50px" width="200px">
</a>
</div>
<div class="navigation">
<input type="checkbox" class="toggle-menu">
<div class="hamburger"></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Feedback</li>
</ul>
</div>
</nav>
<div class="wrapper">
<header>
<img src="Pictures/LakeandMoutains.jpg" class="background">
<h1 class="title">Welcome!</h1>
</header>
<section class="text">
<h3>Essay on Mountains</h3>
</section>
</div>
</body>
Does anyone know how to make the hamburger menu move to the right side of the screen?

Update your .hamburger, .toggle-menu styles like this
.hamburger, .toggle-menu {
display: block;
position: absolute;
right: 30px;
}
Update the value of right according to your need.

You could always use flexbox. The following lines of code will display this on the right hand side:-
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.navigation {
margin-left: auto;
}

Add this to your navigation class:
.navigation{
position:relative;
}
and then this to your hamburger menu to make it stick to the right.
.hamburger{
position:relative;
right:8%;
}
The position absolute will make the hamburger-menu stick relative to the navigation bar and right 8% will stick it to the right.

You must understand the importance of HTML structure and positioning because this is the problem in your HTML.
To fix your problem, you need to put the burger menu and the check box in one container and then position the container.
The problem now is that you are positioning every part individually and their width and height are not properly set.
try to follow the steps I mentioned then let us know if you can do it or not.

How do I use my own icon here HMTL CSS only

I have made 2 icon pngs that I would like to use instead of the ones I have here from Font Awesome. But how do I insert them? I can't browse through pictures when I select class <label for="" class="cancel-btn"><i *class="fas fa-times"*></i></label but it doesn't seem to work at all.
#charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', 'serif'
}
nav {
background: #036832;
position: fixed;
width: 100%;
z-index: 999;
}
nav .wrapper {
/* border */
max-width: 1250px;
padding: 0 5px;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
line-height: 65px;
}
.wrapper .nav-links {
display: inline-flex;
}
.nav-links li {
list-style: none;
}
.nav-links li a {
/* menu bar */
color: white;
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 9px 15px;
border-radius: 4px;
transition: all 0.4s ease;
}
.nav-links li a:hover {
background: #213B35;
}
.nav-links .drop-menu {
background: #046832;
line-height: 45px;
position: absolute;
opacity: 0;
visibility: hidden;
}
.nav-links li:hover .drop-menu {
opacity: 1;
visibility: visible;
transition: all 0.4s ease;
}
.drop-menu li a {
/* drop menu teksten */
display: block;
font-weight: 400;
border-radius: 10px;
}
div.picture1 {
width: 153px;
height: 60px;
background-image: url('Carlsberglogof.png');
}
.nav-links .mobile-item {
display: none;
}
#media screen and (max-width: 970px) {
/* drop menu mobil */
.wrapper .nav-links {
position: fixed;
display: block;
height: 100vh;
width: 100%;
max-width: 350px;
background: #046832;
top: 0;
left: 0;
overflow-y: auto;
line-height: 50px;
padding: 50px 10px;
box-shadow: 2px 15px 15px;
}
.nav-links li {
margin: 10px 10px;
}
.nav-links li a {
padding: 0 20px;
display: block;
font-size: 20px;
}
.nav-links .drop-menu {
position: static;
opacity: 1;
visibility: visible;
padding-left: 10px;
max-height: 0px;
overflow: hidden;
}
#showdrop:checked~.drop-menu {
max-height: 100%;
}
.nav-links .drop-menu li {
margin: 0;
}
.nav-links .drop-menu li a {
font-size: 18px;
}
.nav-links .desktop-item {
display: none;
}
.nav-links .mobile-item {
display: block;
font-size: 20px;
color: white;
font-weight: 500;
padding-left: 20px;
cursor: pointer;
border-radius: 5px;
transition: all 0.4s ease;
}
.nav-links .mobile-item:hover {
background: #213B35;
}
}
.wrapper input {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Carlsberg</title>
<link rel="stylesheet" href="Style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<nav>
<div class="wrapper">
<div class="picture1"> </div>
<ul class="nav-links">
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
<li>Forside</li>
<li>
Mød os
<input type="checkbox" id="showdrop">
<label for="showdrop" class="mobile-item">Mød os</label>
<ul class="drop-menu">
<li>Organisation</li>
<li>Historien bag</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
<label for="" class="cancel-btn"><i class="fas fa-times"></i></label>
</div>
</nav>
</body>
</html>
Hope someone can help, have a good day! :D

Just do it with an img tag:
<img src="your_icon_src" alt="" width="20" height="20">

H1 gives me a white background color on the text

I'm trying to add a header on top of this image with a gradient that I've made but it gives me a weird white background as such https://i.stack.imgur.com/ppuJq.png I want the text on top of the image to have a transparent background. Made the navbar black so its easier to see but anyway, how do I remove it? I am aware that the js script is unfinished if that has anything to do with it.
here is my code
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu h1 {
font-size: 50px;
}
.WelcomeMenu img {
width: 100%;
height: 85vh;
}
.img-gradient {
position: absolute;
width: 100%;
height: 85vh;
}
.img-gradient::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 85vh;
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}
<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAAAA </li>
<img src="Bilder/Medietilsynet.png">
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </H1>
<div class="img-gradient">
<img src="https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg">
</div>
</div>
</section>
<section>
<div class="MiddleMenu">
</div>
</section>

It's because of the background color on body tag and the transparent background on .WelcomeMenu. Ways to fix (Only one of them):
Add a background color to .WelcomeMenu
Have a parent element and set the background color to black
Make the background color of body black
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu {
background-color: red
}
.WelcomeMenu h1 {
font-size: 50px;
}
.WelcomeMenu img {
width: 100%;
height: 85vh;
}
.img-gradient {
position: absolute;
width: 100%;
height: 85vh;
}
.img-gradient::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 85vh;
background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}
<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAAAA </li>
<img src="Bilder/Medietilsynet.png">
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </H1>
<div class="img-gradient">
<img src="https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg">
</div>
</div>
</section>
<section>
<div class="MiddleMenu">
</div>
</section>

The image that you are using is a background image! so for a better solution you can make it the background of the div.WelcomeMenu.
The white color is the background of the page (by default - which is blank white page). and the order of the elements is:
Navbar - black background
h1 - the background of the page
img - the image itself
that means, the h1 is between the two elements.
In case you still want the elements as they are, you can simply add:
.WelcomeMenu {
position: relative;
}
.WelcomeMenu h1 {
color: #ffffff;
font-size: 50px;
position: absolute;
top: 100px; (change it as you wish)
left: 100px; (change it as you wish)
}
The Code:
/*
CSS for the page:
*/
* {
margin: 0;
}
.WelcomeMenu {
position: relative;
height: 85vh;
width: 100%;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url("https://sites.google.com/site/quackquackquest/_/rsrc/1469302829712/duck-duck-maps/duck%20banner%203.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.WelcomeMenu h1 {
color: #ffffff;
font-size: 50px;
}
.MiddleMenu {
color: #FFFF;
height: 600vh;
}
/*
CSS for navbar:
*/
body {
font-family: 'Noto Sans', sans-serif;
}
img {
width: 600px;
margin-left: 0;
margin-top: 0;
margin-bottom: 50px;
}
nav {
align-items: center;
padding: 20px;
display: flex;
justify-content: space-between;
background-color: #000;
transition-duration: 0.3s;
transition-timing-function: linear;
transition-delay: 0.1s;
}
nav .fa {
display: none;
}
nav:hover {
opacity: 100;
}
.nav-list .active {
color: #F10000;
opacity: 1;
}
.nav-list img {
width: 110px;
margin-left: -40px;
margin-top: -30px;
margin-bottom: -35px;
}
.nav-list {
text-align: right;
}
.nav-list ul li {
list-style: none;
display: inline-block;
padding: 2px 20px;
position: relative;
}
.nav-list ul li a {
text-decoration: none;
color: #F10000;
font-size: 20px;
opacity: 1;
}
.nav-list ul li::after {
content: '';
width: 0%;
height: 4px;
background: #C5C6C7;
display: block;
margin: auto;
transition: 0.6s;
}
.nav-list ul li:hover::after {
width: 100%;
}
#media (max-width: 700px) {
.nav-list ul li {
display: block;
}
.nav-list {
position: absolute;
background: black;
height: 125vh;
width: 175px;
top: 0;
right: -300px;
text-align: left;
z-index: 2;
transition: 1s;
}
.nav-list ul li a {
font-size: 15px;
}
.nav-list ul li {
padding: 20px;
}
nav .fa {
display: block;
color: white;
margin: 10px;
font-size: 20px;
cursor: pointer;
padding-left: 10px;
padding-top: 5px;
}
}
<!-- Bootstrap-4 -->
<title> Lookout </title>
<link rel="preconnect" href="https://fonts.googleapis.com/%22%3E">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Body -->
<section class="header">
<nav>
<div class="nav-list" id="navList">
<i class="fa fa-times" onclick="hideMenu()"></i>
<ul>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAA </li>
<li> AAAAAA </li>
<img src="Bilder/Medietilsynet.png">
</ul>
</div>
<i class="fa fa-bars" onclick="showMenu()"></i>
</nav>
</section>
<section>
<div class="WelcomeMenu">
<h1> STOP THINK & CHECK. </h1>
</div>
</section>

responsive webpage works partially

some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar {
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger {
display: none;
}
.navbar .menu ul {
display: flex;
}
.navbar .menu ul li a {
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a {
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active {
background: #5db485;
}
.container {
margin-top: 150px;
width: 1906px;
height: 397px;
}
.promo {
width: 1906px;
}
/* Safari Tours*/
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
;
width: 1906px;
}
.safari-title {
text-align: center;
padding-top: 30px;
font-size: 50px;
}
.banner {
display: flex;
justify-content: center;
}
.safari {
margin: 2%;
}
.safari img {
width: 500px;
}
/*Tablet*/
#media (max-width: 992px) {
.navbar {
height: 218px;
padding: 12px;
}
.navbar .inner_navbar {
flex-direction: column;
}
.container {
margin-top: 218px;
}
}
/*Mobile*/
#media (max-width: 728px) {
.navbar {
height: 150px;
}
.navbar .inner_navbar {
flex-direction: row;
}
.navbar .menu ul {
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li {
padding: 10px;
}
.navbar .menu ul li a {
width: 100%;
padding: 12px;
}
.navbar .hamburger {
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu {
display: none;
}
.navbar .menu.activate {
display: block;
}
.container {
margin-top: 150px;
width: 690px;
height: 144px;
}
.promo {
width: 690px;
}
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
width: 690px;
}
.safari {
margin: 1%;
}
.safari img {
width: 300px;
}
}
<!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">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</header>
<section>
<div class="safari-tours">
<h1 class="safari-title">SAFARI TOURS</h1>
<div class="banner">
<div class="safari">
<img src="https://i.imgur.com/9QH8NFE.jpeg" alt="Morning Safari" />
</a>
</div>
<div class="safari">
<a href="https://bigdunestours.com/desert-safari" target="_top">
<img src="https://i.imgur.com/2E9ytwc.jpeg" alt="Evening Safari" />
</a>
</div>
</div>
</div>
</section>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function() {
menu.classList.toggle("activate");
})
</script>
</body>
</html>
some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
edited i did try as one of the comment mention but still no luckk the results are something like this
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar{
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger{
display: none;
}
.navbar .menu ul{
display: flex;
}
.navbar .menu ul li a{
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a{
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active{
background: #5db485;
}
.container{
width: 100%;
max-width: 1906;
}
/*Tablet*/
#media (max-width: 992px){
.navbar{
height: 218px;
padding: 12px;
}
.navbar .inner_navbar{
flex-direction: column;
}
.container {
max-width: 991.98px;
}
}
/*Mobile*/
#media (max-width: 728px){
.navbar{
height: 150px;
}
.navbar .inner_navbar{
flex-direction: row;
}
.navbar .menu ul{
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li{
padding: 10px;
}
.navbar .menu ul li a{
width: 100%;
padding: 12px;
}
.navbar .hamburger{
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu{
display: none;
}
.navbar .menu.activate{
display: block;
}
.container{
max-width: 727.98px;
}
}
<!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">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</div>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function(){
menu.classList.toggle("activate");
})
</script>
</body>
</html>

Use 100% width and set a max-width for each #media.
Important: use % in your main layout, not absolute pixels.
By using this the content will not overflow the .container
.container {
width: 100%;
max-width: 1906px;
}
#media (max-width: 992px) {
.container {
/* width 100% is set aboven*/
max-width: 991.98px;
}
}
#media (max-width: 728px) {
.container {
/* width 100% is set aboven*/
max-width: 727.98px;
}
}

now my footer covering my content and navbar

I have any issue, i have been make some footer and when i test my new footer, the Footer covered the content and navbar. i still figure it out how to solve this problem. hope i can get some answer at here...
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- font -->
<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=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="img/logo.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="Sponsored/1.jpg">
<img src="Sponsored/2.png">
<img src="Sponsored/3.jpg">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="img/logo.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
i have tried to change the position to relative absolute or whatever but it make me found another problem. maybee some one can help me to fix this problem, please.... i have been try to solve his problem by googling for a day and still doesn't have any clue about this problem...

Just add z-index:10 to nav css style
body {
min-height: 400px;
margin-bottom: 100px;
clear: both;
background: #eff2f7;
}
a {
left: -50;
text-decoration: none;
color: white;
display: block;
transition: 0.3s;
font-size: 20px
}
a:hover {
transition: 0.3s;
}
nav {
position: fixed;
top: 0;
left: 20px;
right: 0;
background: #1e77b0;
font-family: Palatino Linotype;
z-index:10;
}
.title {
display: inline-block;
float: left;
line-height: 50px;
}
.menu {
display: inline-block;
float: left;
}
.menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu ul li {
display: inline-block;
}
.menu ul li a {
padding: 0 50px;
display: block;
line-height: 50px;
}
.menu li:hover {
background-color: #009cff;
}
.wrap {
width: 95%;
margin: 0 auto;
}
.tblmenubox {
display: inline-block;
float: right;
line-height: 50px;
}
.tblmenu {
display: block;
position: absolute;
width: 25px;
height: 25px;
background: #1e77b0;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.tblmenubox {
display: none;
visibility: hidden;
}
.kotakpersegi {
display: block;
position: absolute;
left: -40px;
width: 250px;
height: 50px;
background: #009cff;
transform: translateY(-50%);
-webkit-transform: skew(30deg);
-moz-transform: skew(30deg);
-o- transform: skew(30deg);
transform: skew(30deg)
}
.logo {
position: absolute;
left: 50px;
}
#media screen and (max-width:1000px) {
.kotakpersegi {
width: 150%;
}
.logo {
position: absolute;
float: center;
left: 25%;
}
.menu {
display: none;
}
.tblmenubox {
display: block;
visibility: visible;
}
.menu.sh {
display: block;
position: absolute;
top: 50px;
background: #1e77b0;
width: 100%;
left: 0;
}
.menu a:hover {
color: #eff2f7;
background: #009cff;
}
.menu ul li {
display: block;
text-align: center;
}
}
/*navbar code*/
.footer-bottom {
text-align: center;
background-color: #1e77b0;
width: 100%;
position: relative;
bottom: 50%;
}
.Footer-header h3 {
font-family: 'Roboto Condensed', sans-serif;
color: white;
margin: 20px;
text-align: left;
}
.Footer-Sponsored img {
height: 128px;
margin: 10px;
}
hr {
margin: 20px;
border: 0.5px solid lightblue;
}
.hr1 {
margin: 40px;
}
.Footer-deep {
margin: 30px;
}
.Footer-deep img {
height: 30px;
margin: 10px;
}
.Footer-deep h3 {
color: white;
font-family: 'Garamond', sans-serif;
font-size: 100%;
}
.content-wrapper { /* added a top margin */
margin-top: 50px; /* We know this is the height because it is applied specifically in CSS */
padding: 30px;
}
.content-wrapper h1 {
font-family: Palatino Linotype;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>SA-MR</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS document -->
<link rel="stylesheet" type="text/css" href="css/SAMRnavbar.css">
<meta charset="utf-8">
<!-- font -->
<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=Roboto+Condensed:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<nav>
<div class="wrap">
<div class="title">
<div class="kotakpersegi">
<a href="">
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" width="180" height="50">
</a>
</div>
</div>
<div class="tblmenubox">
<div class="togel tblmenu">
</div>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Contact</li>
<li>Service</li>
<li>Fiture</li>
<li>Maps</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(".togel.tblmenu").click(function () {
$(".menu").toggleClass("sh");
});
</script>
<!-- Navbar -->
<div class="content-wrapper">
<h1>San Andreas Motor Racing Grand Prix</h1>
</div>
<!-- content stop here -->
<footer class="footer-bottom">
<div class="Footer-header">
<h2>San Andreas Motor Racing</h2>
<hr class="Light-line">
<h3>Sponsored By</h3>
</div>
<div class="Footer-Sponsored">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png">
</div>
<hr class="hr1">
<div class="Footer-deep">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/Test-Logo.svg/1175px-Test-Logo.svg.png" align="left">
<h3 align="right">San Andreas Motor Racing Championship</h3>
</div>
</footer>
</body>
</html>

This can be resolved by adding 'z-index: -1;' to your footer-bottom class.
Learn more about z-indexing here
In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The z-index attribute lets you adjust the order of the layering of objects when rendering content.
In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index

You should change the z-order of your elements.
Set z-index of footer less than z-index of the navbar (enough set z-index: -1 for footer)
More info:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index