Home > Net >  Bootstrap 5 Horizontal Scrolling to Nothing
Bootstrap 5 Horizontal Scrolling to Nothing

Time:11-11

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.stack.imgur.com/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/[email protected]/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 H6PRO" 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=  BONUS USD Steam Voucher!*" 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 Far Cry 6!*" 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!            
  • Related