I am completely new to web development and currently working on creating my very first website. I've managed to set up the layout, but I'm facing an issue when trying to optimize it for mobile devices. Specifically, some of my divs (particularly the police-div) are not expanding to the full width of the screen, and I'm uncertain as to why this is happening. I even tried removing the background image, but the problem persists.
Any assistance or guidance on this matter would be greatly appreciated!
Here is the problem I am encountering: https://gyazo.com/593e152db8e3a15cd7bedcfb30b8fe08. This is the desired look I am aiming for: https://gyazo.com/ffdcb59173137df53ba18f466411bac8
/*Main*/
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
background-color: white;
font-family: 'Poppins', sans-serif;
}
/*NavBar ;*/
#logo-space{
width: auto;
height: auto;
background-color: #0f2471;
}
#logo-space img{
width: 5010;
height: auto;
position: relative;
left: 2.5rem;
}
#fms-btn{
width: 120px;
position: relative;
top: 1rem;
right: 2rem;
height: 60px;
font-size: 1rem;
justify-content: center;
text-decoration: none !important;
background-color: #030b29;
color: white;
}
.nav-bar{
background-color: #16377e;
position: relative;
}
#navbar-space .nav-link{
position: relative;
left: 4rem;
}
#home-img{
/* to remove space between images, because car image has this wave and page background would be visable */
margin-bottom: -86px;
padding-bottom: 20px;
}
#home-img img{
object-fit: cover;
width: 100%;
height: 50vh;
}
#about-us{
background-color: white;
background-position: center;
background-size: cover;
z-index: 2;
/* probably padding needed */
color: #030b29;
height: 50vh;
}
#about-title{
font-weight: bold;
font-size: 45px;
color: #030b29;
}
...
@media (max-width: 400px) {
...
}
<!DOCTYPE html>
<html>
<!--When Site is finished, check all compats-->
<head>
...
</head>
<body>
<body style="margin: 0;">
<!--Logo Space-->
...
...
</body>
</html>