htmlcssscrollbootstrap-5horizontal-scrolling

Bootstrap 5 Horizontal Scrolling to Nothing


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


Solution

  • 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.