I am very new to web development. Trying to make my first site. I've made my layout however, when I am trying to make it work for mobile devices, some of my divs (police-div) is not extending to the full width of the screen and I am not exactly sure why. I've even removed the background image and it is still appearing.
Any help would be great!
This is the issue: https://gyazo.com/593e152db8e3a15cd7bedcfb30b8fe08
This is how I would like it to look: 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;
}
#about-text{
font-size: large;
color: #030b29;
}
#learn-more-btn{
width: 15rem;
font-size: 20px;
text-decoration: none !important;
background-color: #030b29;
color: white;
}
#ee{
width: auto;
padding-top: 10px;
height: 70%;
justify-content: center;
}
#application{
width: 50%;
padding-top: 10px;
justify-content: center;
padding-bottom: 50px;
}
.outer-div{
background-color: white;
width: 120%;
height: 100%;
}
h2{
font-weight: bolder;
}
#police-div{
background-image: url("../img/div/police.png");
width: 120%;
height: 70vh;
background-repeat: no-repeat;
margin-bottom: -80px;
}
#fire-div{
background-image: url("../img/div/fire.png");
width: 120%;
height: 70vh;
background-repeat: no-repeat;
margin-bottom: -70px;
}
#ambulance-div{
background-image: url("../img/div/ambulance.png");
width: 120%;
height: 70vh;
background-repeat: no-repeat;
margin-bottom: -70px;
}
#civ-div{
background-image: url("../img/div/control.png");
width: 120%;
height: 70vh;
background-repeat: no-repeat;
margin-bottom: -70px;
}
#fcc-div{
background-image: url("../img/div/civ.png");
width: 120%;
height: 70vh;
background-repeat: no-repeat;
margin-bottom: -70px;
}
.align-text{
padding: 50px 50px 50px 20px;
font-size: 20px;
justify-content: left;
}
#footer{
color: white;
background-color: #16377e;
height: auto;
width: auto;
}
#footer a{
color: white;
text-decoration: none;
text-align: center;
}
#footer a:hover{
text-decoration: underline;
}
#contact-title{
font-weight: bold;
margin-top: 20px;
}
#contact-content{
font-size: large;
margin-top: 20px;
}
#contact-button{
width: 12rem;
height: 3rem;
font-size: 18px;
text-decoration: none !important;
background-color: #030b29;
color: white;
position: relative;
text-align: center;
position: relative;
}
#contact{
background-image: url("../img/l2.png");
background-position: center;
background-size: cover;
height: 45%;
}
@media (max-width: 400px) {
body{
margin: 0;
font-family: 'Poppins', sans-serif;
width: 100%;
}
#logo-space{
width: auto;
height: auto;
}
#logo-space img{
width: auto;
height: auto;
position: relative;
left: -1.5rem;
}
#fms-btn{
width: 120px;
position: relative;
top: -1rem;
right: 2px;
height: 60px;
margin: 0;
padding: 0;
font-size: 1rem;
justify-content: center;
text-decoration: none !important;
background-color: #030b29;
color: white;
}
.nav-bar{
margin-top: -10px;
}
#about-us{
background-color: white;
background-position: center;
background-size: cover;
z-index: 2;
/* probably padding needed */
color: #030b29;
height: 50vh;
text-align: center;
}
#ee{
height: 85px;
justify-content: center;
}
#about-title{
font-weight: bold;
font-size: 25px;
color: #030b29;
width: 100%;
margin-top: -50px;
}
#about-text{
font-size: small;
color: #030b29;
width: 100%;
text-align: center;
margin: auto;
}
#learn-more-btn{
width: 18rem;
font-size: auto;
text-decoration: none !important;
background-color: #030b29;
color: white;
font-size: x-small;
position: relative;
left: 1rem;
}
#redirect-symbol{
width: 25px;
height: auto;
}
.outer-div{
background-color: white;
width: 100%;
height: auto;
}
#about-divisions{
height: 150%;
background-color: red;
justify-content: center !important;
}
h2{
font-size: small;
font-weight: bolder;
}
#police-div{
height: 25vh;
width: 100%;
font-size: 2px;
background-image: none;
justify-content: center;
background-color: #030b29;
}
.align-text{
font-size: x-small;
justify-content: left;
width: auto;
}
}
<!DOCTYPE html>
<html>
<!--When Site is finished, check all compats-->
<head>
<title>Divisions - South Yorkshire RPC</title>
<!--CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/b5212ab333.js" crossorigin="anonymous"></script>
<!--Index Stylesheet-->
<link rel="stylesheet" type="text/css" href="css/divstyle.css">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-kQtW33rZJAHjgefvhyyzcGF3C5TFyBQBA13V1RKPf4uH+bwyzQxZ6CmMZHmNBEfJ" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<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=Poppins&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css"></style>
</head>
<body>
<body style="margin: 0;">
<!--Logo Space-->
<div id="logo-space">
<div class="row">
<div class="col">
<img id="logo" src="img/logo.png" class="image-fluid" alt="">
</div>
<button id="fms-btn" type="button" class="btn mx-4 m-3">
<span class="text-center" style="text-decoration: none;">Head to FMS</span>
</button>
</div>
</div>
<!--Nav Bar-->
<div id="home">
<nav id="navbar-space" class="navbar navbar-expand-lg nav-bar">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="./index.html">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#about">ABOUT US</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="./divisons.html">DIVISIONS</a>
</li>
<li class="nav-item">
<a class="nav-link text-white " href="#appeals">APPEALS</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Top image GTA, there is no text so it can be <img> tag -->
<div id="home-img" style="position: relative; z-index: 2;">
<img src="/img/div/bg1.png" alt="">
</div>
<!-- About us section, with car in background -->
<div id="about-us" style="position: relative; z-index: 3;">
<!-- Your regular columns and content -->
<div class="container-md">
<div class="row justify-content-center">
<div id="about-title" class="col-4 about-text-header">
<span style="text-decoration: none;">What do we offer?</span>
<div class="row" class="">
<button id="learn-more-btn" type="button" class="btn justify-content-center mx-4 m-3">
<img id="redirect-symbol" src="img/redirect.png" class="text-center" alt="" width="30" height="30" style="padding-right: 5px;">
<span class="text-center" style="text-decoration: none;">Learn More</span>
</button>
</div>
</div>
<div id="about-text" class="col-4 text-wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil tempore cumque cupiditate alias nostrum ad beatae neque mollitia. Molestiae blanditiis voluptatum necessitatibus dolore omnis iure tenetur repellendus quis consequatur magni. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum quo, ducimus tempore sit mollitia reprehenderit.
</p>
</div>
<div class="row justify-content-center">
<img id="ee" src="./img/div/ee.png" alt="">
</div>
</div>
</div>
</div>
<div id="about-divisions" style="">
<div class="" style="color: white;">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-6 offset-1">
<div id="police-div" class="">
<div class="col-6 align-text text-center">
<h2 class="text-center" style="text-decoration: none;">South Yorkshire Police</h2>
<p id="para" class="px-5 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
</div>
</div>
</div>
</div>
<!-- Offset Custom not using offset in bootstrap
<div class="row g-0">
<div class="col-6 offset-5">
<div id="fire-div" class="">
<div class="col-6 align-text text-center">
<h2 class="text-center" style="text-decoration: none;">South Yorkshire Fire & Rescue</h2>
<p class="px-5 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
</div>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-6 offset-1">
<div id="ambulance-div" class="">
<div class="col-6 align-text text-center">
<h2 class="text-center" style="text-decoration: none;">Yorkshire Ambulance Service</h2>
<p class="px-5 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
</div>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-6 offset-5">
<div id="civ-div" class="">
<div class="col-6 align-text text-center">
<h2 class="text-center" style="text-decoration: none;">Civillian Operations</h2>
<p class="px-5 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
</div>
</div>
</div>
</div>
<div class="row g-0">
<div class="col-6 offset-1">
<div id="fcc-div" class="">
<div class="col-6 align-text text-center">
<h2 class="text-center" style="text-decoration: none;">Atlas Control Room</h2>
<p class="px-5 py-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Et vitae deleniti aliquid architecto, libero, consequatur natus inventore dolorem labore accusamus autem laborum reprehenderit harum. Vitae doloribus possimus debitis ipsam nisi repellendus, at corporis necessitatibus mollitia modi asperiores qui natus quas. Similique voluptatem perspiciatis recusandae architecto dolore. Itaque expedita est sequi.</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<img id="application" src="./img/div/application.png" alt="">
</div>
</div>
<div id="contact" class="" style="color: white;">
<div class="row align-items-center text-center text-break">
<div class="col-sm-2">
</div>
<div id="contact-title" class="col-sm-4 h1">
Like what you see? <br>Then apply today!
</div>
<div id="contact-content" class="col-sm-2 py-3">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur suscipit minus voluptatum at et itaque veritatis nemo sint recusandae molestiae.
</div>
<button id="contact-button" type="button" class="btn m-3 justify-content-center">
<img id="redirect-symbol" src="img/redirect.png" class="text-center" alt="" width="25" height="25" style="padding-right: 5px;">
<span class="text-center" style="text-decoration: none; padding-right: 1rem;">Apply now!</span>
</button>
</div
</div>
<div id="footer">
<div class="container">
<div class="row text-center">
<div class="col-md-2 pt-5">
<ul class="list-unstyled list-spaced">
</ul>
</div>
<div class="col-md-2 offset-md-1 mb-5 pt-5">
<ul class="list-unstyled list-spaced">
<li class="mb-2"><h6 class="text-uppercase">Headers</h6></li>
<li><a href="">About Us</a></li>
<li><a href="">Feed</a></li>
<li><a href="./divisions.html">Divisions</a></li>
<li><a href="">Updates</a></li>
</ul>
</div>
<div class="col-md-2 pt-5">
<ul class="list-unstyled list-spaced">
<li class="mb-2"><h6 class="text-uppercase">Application</h6></li>
<ul class="list-unstyled list-spaced">
<li><a href="">Apply</a></li>
<li><a href="">FMS Login</a></li>
<li><a href="">Appeal</a></li>
<li><a href="">Recruitment</a></li>
</ul>
</ul>
</div>
<div class="col-md-2 pt-5">
<ul class="list-unstyled list-spaced">
<li class="mb-2"><h6 class="text-uppercase">Social Media</h6></li>
<ul class="list-unstyled list-spaced">
<li><a href="">Twitter</a></li>
<li><a href="">Youtube</a></li>
<li><a href="">Discord</a></li>
</ul>
</ul>
</div>
</div>
</div>>-->
</div>
</body>
</html>
