On every page I make, the page is able to scroll horizontally a tiny bit. When it scrolls, there is nothing there, the footer and header ends at the edge of the screen and just scrolls into white. It is only a little, but is annoying as the scroll bar takes up room on my tiny laptop. [notice the white space to the side of the header.][1] [1]: https://i.sstatic.net/mHSDx.png
As this happens on every page, I have a feeling it has something to do with my CSS for the header or footer, although I cant figure out which. I have included my CSS and my home page below.
I was hoping someone could help end the horizontal scrolling.
CSS:
#navbar {
background-color: #1A409F;
position: center;
}
#NavBrandText {
color: white;
text-decoration: none;
font-style: italic;
font-family: Helvetica-UltraCompressed;
letter-spacing: 1px;
padding-right: 80px;
}
@font-face {
font-family: Helvetica-UltraCompressed;
src: url(Helvetica-UltraCompressed.otf);
}
#offcanvas-subheading {
font-size: 30px;
padding-right: 15px;
}
#offcanvas-body {
font-size: 20px;
padding-left: 10px;
text-decoration: none;
color: black;
}
#navlogo {
width: 80px;
}
#offcanvas-open {
border-style: solid;
border-color: #2149ae;
border-width: 5px;
border-radius: 5px;
color: white;
}
#menuButton {
height: 20px;
width: 20px;
}
.carousel-control-prev {
padding-right: 150px;
}
.carousel-control-next {
padding-left: 150px;
}
#footer {
background-color: #292929;
padding-top: 20px;
padding-bottom: 20px;
}
.footer-top .container {
padding-bottom: 10px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row:before {
display: table;
content: " ";
}
.col-sm-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
.footernote {
display: block;
text-align: center;
margin-bottom: 0;
}
.footernote li {
display: inline-block;
color: #fff;
}
#before:before {
font-family: FontAwesome;
content: " \f111 ";
font-size: 7px;
margin: 5px;
vertical-align: middle;
color: #fff;
}
.ul {
padding: 0;
margin-top: 0;
}
.ul li {
list-style: none
}
#SystemBuilder {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
height: 1000px;
}
#ProductHead {
margin-left: 25px;
}
Home Page HTML
<!DOCTYPE HTML>
<html lang="en-AU">
<head>
<!-- Require Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CDN - Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- CDN - FontAwesome -->
<script src="https://kit.fontawesome.com/fe972dc1f9.js" crossorigin="anonymous"></script>
<!-- Title -->
<title>Jailbreak Computers</title>
<!-- Webpage Icon -->
<link rel="shortcut icon" href="Images/Jailbreak Computers Icon.png"/>
<!-- CSS -->
<link rel="stylesheet" href="Style.css">
</head>
<body>
<!-- Nav Bar -->
<nav class="navbar navbar-dark d-flex justify-content-between" id="navbar">
<div class="container-fluid">
<a class="navbar-brand" style="color: white;" href="Home Page.html">
<img src="Images/Jailbreak Computers Logo.png" alt="logo" id="navlogo" class="rounded-circle">
</a>
<a id="NavBrandText" href="Home Page.html">
<h1 style="font-size: 437.5%;">Jailbreak Computers</h1>
</a>
<ul class="navbar-nav">
<button class="btn" type="button" id="offcanvas-open" data-bs-toggle="offcanvas" data-bs-target="#pages">
<i id="menuButton" class="fas fa-bars"></i>
</button>
</ul>
</div>
</nav>
<!-- Offcanvas Pages Menu -->
<div class="offcanvas offcanvas-end" id="pages">
<div class="offcanvas-header">
<h1 class="offcanvas-title" id="offcanvas-title"><center>Pages</center></h1>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<ul style="list-style-type:none;">
<h3 class="display-3" id="offcanvas-subheading">PC Components</h3>
<li><a id="offcanvas-body" href="PCCOM_CPUs.html">CPUs</h5></a></li>
<li><a id="offcanvas-body" href="PCCOM_MBD.html">Motherboards</a></li>
<li><a id="offcanvas-body" href="PCCOM_Memory.html">Memory</a></li>
<li><a id="offcanvas-body" href="#">Storage Devices (HDD/SSD)</a></li>
<li><a id="offcanvas-body" href="#">Graphics Cards</a></li>
<li><a id="offcanvas-body" href="#">Power Supply</a></li>
<li><a id="offcanvas-body" href="#">Case</a></li>
<li><a id="offcanvas-body" href="#">Accessories</a></li>
<br>
<li><a id="offcanvas-body" href="PCCOM_SystemBuilder.html">System Builder</a></li>
<br>
<h3 class="display-3" id="offcanvas-subheading">Peripherals</h3>
<li><a id="offcanvas-body" href="#">Keyboards</a></li>
<li><a id="offcanvas-body" href="#">Mice & Mousepads</a></li>
<li><a id="offcanvas-body" href="#">Monitors</a></li>
<li><a id="offcanvas-body" href="#">Headsets/Speakers</a></li>
<li><a id="offcanvas-body" href="#">Microphones</a></li>
<br>
<h3 class="display-3" id="offcanvas-subheading">Software</h3>
<li><a id="offcanvas-body" href="#">Apps</a></li>
<li><a id="offcanvas-body" href="SW_Games.html">Games</a></li>
<li><a id="offcanvas-body" href="#">Operating Systems</a></li>
<br>
<h3 class="display-3" id="offcanvas-subheading">Other</h3>
<li><a id="offcanvas-body" href="#">Competitions</a></li>
</ul>
</div>
</div>
<!-- Carousel -->
<div id="Carousel" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#Carousel" data-bs-slide-to="4"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<a href="https://www.microsoft.com/en-au/windows/windows-11" target="_blank">
<img src="Images/Windows 11.gif" alt="Windows 11" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/search?search=EPOS%20H6PRO" target="_blank">
<img src="Images/EPOS Headset.gif" alt="EPOS Headsets" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/Intel-Game-Bundle-Q4" target="_blank">
<img src="Images/IntelPromo.jpg" alt="Intel Promo" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/search?search=+%20BONUS%20USD%20Steam%20Voucher!*" target="_blank">
<img src="Images/MSIPromo.png" alt="MSI Promo" class="d-block w-100">
</a>
</div>
<div class="carousel-item">
<a href="https://www.computeralliance.com.au/search?search=BONUS%20Far%20Cry%206!*" target="_blank">
<img src="Images/SamsungPromoFarCry.jpg" alt="Samsung Promo" class="d-block w-100">
</a>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#Carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#Carousel" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<br>
<br>
<!-- Vertically Centered Cookies Modal -->
<div class="modal fade" id="onload" tabindex="-1" aria-labelledby="modal" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" id="onload">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal">Do You Want A Cookie? We Want Yours! 🍪</h5>
</div>
<div class="modal-body">
<strong>This site uses cookies</strong> to personalise the content for you. We legally have to ask you to accept these for marketing and advertising purposes. Cookies are used by third-parties to offer ads suited and tailored to you.<br>
<strong>Just kidding. We dont really use cookies.</strong> There are no ads on this site sponsored by third-parties, but to be annoying, we do ask you disable you Ad Blocker so we do get paid for ads.
</div>
<div class="modal-footer">
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">
<button type="button" class="btn btn-secondary">More Information</button>
</a>
<button type="button" class="btn btn-success" data-bs-dismiss="modal">Accept & Close</button>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer id="footer">
<div class="row">
<div class="col-sm-12">
<ul class="footernote">
<li>Local Partners: <a href="https://www.computeralliance.com.au/">Computer Alliance</a> and <a href="https://www.umart.com.au/">Umart</a></li>
</ul>
<ul class="footernote">
<li>Showroom Open 7 Days</li>
<li id="before">
Monday to Friday 8am to 5pm
</li>
<li id="before">
Thursday 8am to 7pm
</li>
<li id="before">
Saturday 9am to 5pm
</li>
<li id="before">
Sunday 9am to 4pm
</li>
</ul>
<ul class="footernote">
<li>Cnr Manly Rd & New Clevland Rd, Tingalpa</li>
<li id="before">Phone <a href="tel:07 26678837">07 2667 8837</a> (07 COMPUTER)</li>
<li id="before">Email <a href="mailto:24945@iona.qld.edu.au">sales@jailbreakcomputers.com.au</a></li>
</ul>
</div>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!--Modal JS Script -->
<script type="text/javascript">
window.onload = () => {
$('#onload').modal('show');
}
</script>
</body>
</html>
Thanks, Pilot640
the problem is in the footer.
Since .row has negative left and right margin, you have to insert a .container between the <footer> and the .row.