navbar wont shrink when in dev tools with responsive design - media

Question

im having trouble with media query's and responsive designs
I cant seem to get the bottom nav to shrink when page gets smaller it just goes off page what am i doing wrong can someone please help me correct my code
#import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght#500&display=swap');
*{ margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family:'DM Sans', sans-serif;
;
}
.header-top{
width: 100%;
height: 65px;
background:#A4E0EB;
padding: 0 50px;
display: flex;
justify-content: right;
}
.header-top .header-top-container
{display: flex; align-items: center;
}
.header-top .header-top-container .header-top-quickSearch input[type="text"]
{border:1px solid#A4E0EB;
padding: 5px 10px;
outline: none;
border-radius: 4px;}
.header-top .header-top-container .header-top-quickSearch input[type="text"]:focus
{width: 250px}
.header-top .header-top-container ul{display: flex;
margin-right: 5rem;}
.header-top .header-top-container ul li{margin:0 12px;
font-size: 14px;
}
.header-top ul li a{color: #fff;}
.header-top ul li a:hover{color:#FFB5C3;}
/* header container */
.header-container { display: flex;
background-color:#f6f8f5;
font-family:'DM Sans', sans-serif;}
.header-container1{display: flex;
position: relative;}
img.header-logo{right: 60em; bottom:-5em;
position: absolute;}
/* header container end */
/* Links inside the navbar */
.header-container a {
float:left;
font-size: 14px;
color: #6F7378;
padding: 14px 16px;
text-decoration: none;
z-index: 5;}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
z-index: 5;}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 14px;
border: none;
outline: none;
color: #6F7378;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
z-index: 5;}
.dropdown-content-grid{display: grid;
grid-template-columns: repeat(4, max-content);}
.blank{text-decoration: none;
cursor:default;
pointer-events: none;
}
/* a tag & buttons underline */
*,
*:before
*:after {padding: 0;
margin: 0;
box-sizing: border-box;}
button{position: relative;
text-decoration: none;
font-family:'DM Sans', sans-serif;
color: #6F7378;
font-size: 1px;
letter-spacing: 0.5px;
padding:0 10px;}
button:after{content: "";
position: absolute;
background-color: #FFB5C3;
height: 3px;
width: 0%;
left: 0;
bottom: -0.4px;}
button:hover:after{width: 100%;}
.home{position: relative;
text-decoration: none;
font-family:'DM Sans', sans-serif;
color: #6F7378;
font-size: 16px;
letter-spacing: 0.5px;
padding:0 10px;}
.home:after{content: "";
position: absolute;
background-color: #FFB5C3;
height: 3px;
width: 0%;
left: 0;
bottom: -0.4px;}
.home:hover:after{width: 100%;}
.header-container > .home:focus, .home:hover {color: #FFB5C3;}
.dropdown > button:focus, button:hover {color: #FFB5C3;}
/* a tag & buttons underline end */
/* Add a red background color to navbar links on hover */
/* .navbar a.home:hover,.dropdown:hover .dropbtn {
background-color: #FFB5C3;
} */
/* Dropdown content (hidden by default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 10px;
z-index: 5;
}
.dropdown button:focus + .dropdown-content,
.dropdown-content:hover {
display: block;}
/* Links inside the dropdown */
.dropdown-content a {
float: none;
color: #6F7378;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
z-index: 5;
}
.navPages a:hover{ color: #FFB5C3;}
.navPages button:hover{color: #FFB5C3;}
/* Add a grey background color to dropdown links on hover */
/* .dropdown-content a:hover {
background-color:#FFB5C3;
} */
/* Show the dropdown menu on hover */
.dropdown .dropdown-content {
display: none;
z-index: 5;
}
.navPages{
display: flex;
justify-content: center;
align-items: center;
z-index: 5;}
.header-container{
display: flex;
justify-content: center;
align-items: center;
}
/* .toggle-button{position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 20px;}
.toggle-button .bar{height: 3px;
width: 100%;
background-color: #FFB5C3;
border-radius: 10px;} */
.wholebodycontainer{margin-top: 3rem;}
h1{display: flex;
justify-content: center;
align-items: center;
margin-bottom: 3rem;
font-size:35px;
letter-spacing: 0.75rem;
color: #506671;}
/* Image Slider */
*{Margin:0;
padding: 0;
box-sizing: border-box;}
.swiper{width: 65%;
height: fit-content;
border-radius: 5px;}
.swiper-slide img {width: 100%;}
.swiper .swiper-button-prev, .swiper .swiper-button-next {color: #FFB5C3;}
.swiper .swiper-pagination-bullet-active{background: #FFB5C3;}
/* Image Slider End */
#media screen and (max-width:1340px) {}
^^^CSS^^^
<!DOCTYPE html>
<html lang="en-uk">
<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>Cake & a'Cuppa Website</title>
<link rel="stylesheet" href="Cake-and-Cuppa-Website-Up-To-Date-Style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.css"/>
</head>
<body>
<div class="body-wrapper">
<header class="header" role="banner">
<div class="header-top">
<div class="header-top-container">
<div class="header-top-quickSearch">
<input type="text" placeholder="Search the store">
</div>
<ul class="header-top-menu">
<li class="header-top-menu-item">CONTACT US</li>
<li class="header-top-menu-item">DELIVERY SERVICE</li>
<li class="header-top-menu-item">TEL:[phone]</li>
</ul>
</div>
</div>
<div class="header-container">
<header class="header">
<div class="navPages-container">
<div class="header-container1"><img class="header-logo"-image src="c:\Users\micha\Desktop\cake-svg.png" alt="" width="155px" height="155px"></div>
<nav class="navPages">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<a class="home" href="#home">HOME</a>
<div class="dropdown">
<button class="dropbtn">CELEBRATION CAKES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="dropdown-content-grid">
BIRTHDAY CAKES
OCCASION CAKES
SEASONAL CAKES
TODDLER CAKES
CAKES FOR HIM
ANNIVERSARY CAKES
THANKSGIVING CAKES
NUMBER CAKES
CAKES FOR HER
WEDDING CAKES
CHRISTMAS
PRINCESS CaKES
TODDLER CAKES
CHRISTENING CAKES
BURNS NIGHT GIFTS
ROMANTIC CAKES
GIRLS BIRTHDAY CAKES
NEW BABY CAKES
VALENTINE'S DAY
<div></div>
BOYS BIRTHDAY CAKES
RETIREMENT CAKES
ST DAVID'S DAY CAKES
<div></div>
TEEN BIRTHDAY CAKES
GRADUATION CAKES
ST PATRICK'S DAY CAKES
<div></div>
NUMBER CAKES
RELIGIOUS CAKES
MOTHER'S DAY
<div></div>
CAKES WITH TOYS
GET WELL SOON CAKES
EASTER
<div></div>
ANIMAL CAKES
GOOD LUCK CAKES
ST GEORGE'S DAY CAKES
<div></div>
HANDBAG & SHOE CAKES
WELL DONE CAKES
EID CAKES
<div></div>
PRINCESS CAKES
<div></div>
FATHERS DAY CAKES
<div></div>
SUPERHERO CAKES
<div></div>
PRIDE DAY CAKES
<div></div>
SPORTING CAKES
<div></div>
HALLOWEEN CAKES
<div></div>
TECHNOLOGY CAKES
<div></div>
<div></div>
<div></div>
ROMANTIC CAKES
<div></div>
<div></div>
<div></div>
TWO~TIER CAKES
<div></div>
<div></div>
<div></div>
RUDE BIRTHDAY CAKES
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">GIFT CAKES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a class="home" href="#home">PHOTOCAKES</a>
<div class="dropdown">
<button class="dropbtn">CUPCAKES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<a class="home" href="#home">CAKES IN-A-TIN</a>
<div class="dropdown">
<button class="dropbtn">CORPORATE CAKES
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</nav>
</div>
</div>
</header>
<div class="wholebodycontainer">
<h1>YORKSHIRES FAVOURITE CAKE STORE</h1>
<!-- image slider -->
<div id="container-body">
<div class="container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="c:\Users\micha\Desktop\New Professional\tets\Untitled-3.png" alt=""></div>
<div class="swiper-slide"><img src="c:\Users\micha\Desktop\New Professional\tets\Untitled-3.png" alt=""></div>
<div class="swiper-slide"><img src="c:\Users\micha\Desktop\New Professional\tets\Untitled-3.png" alt=""></div>
<div class="swiper-slide"><img src="c:\Users\micha\Desktop\New Professional\tets\Untitled-3.png" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper#8/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.swiper', {
autoplay:{delay: 5000,
disableOnInteraction: false,},
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
</div>
<!-- image end -->
</div>
</div>
</body>
</html>
^^^HTML^^^
I cant seem to get the bottom nav to shrink when page gets smaller it just goes off page what am i doing wrong can someone please help me correct my code