The background image on my About page is not displaying correctly. The first < div > in my container shows it as intended, but the second < div > has white bars on the sides of the table.
As a newcomer to Bootstrap and HTML, I hesitated to seek help, but after struggling for a week without success, I am reaching out. I have attempted several solutions found on Stack Overflow and other sites with no luck. Though I can't recall everything I've tried, some attempts include placing the table in its own container, adding rows to the current container, duplicating the background image at different locations, among others. Undoubtedly, I may be making an error somewhere, and I apologize for that. Thank you for any assistance you can provide.
<body>
<header>
<!-- Start of Top Navbar -->
<!-- End of Top Navbar -->
<!-- Start of Background Image -->
<div class="view" style="background-image: url('/images/backgrounds/forest_sunset.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center;">
<!-- Start of Unique Page Content -->
<div class="container h-100">
<div class="d-flex align-items-center justify-content-center h-100 align-self-center">
<div class="d-flex flex-column text-center">
<h1><strong>About</strong></h1>
<h4>Content.</h4>
</div>
</div>
<div class="d-flex flex-column text-center">
<div class="view" style="background-image: url('/images/backgrounds/forest_sunset.jpg'); background-color: black; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center;">
<div class="table-responsive">
<table class="table table-sm" id="forest_sunset">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Data</th>
<th scope="col">Data</th>
<th scope="col">Data</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"></th>
<th scope="col">Data</th>
<th scope="col">Data</th>
<th scope="col">Data</th>
</tr>
<tr>
<th scope="row"></th>
<th scope="col">Data</th>
<th scope="col">Data</th>
<th scope="col">Data</th>
</tr>
<tr>
<th scope="row"></th>
<th scope="col">Data</th>
<th scope="col">Data</th>
<th scope="col">Data</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- End of Unique Page Content -->
</div>
<!-- End of Background Image -->
</header>
<footer>
<!-- Start of Bottom Navbar -->
<!-- End of Bottom Navbar -->
</footer>
<!-- JQuery -->
<!-- Popper.js -->
<!-- Bootstrap JavaScript -->
</body>
Here is an example of how the page currently looks. My goal is for the background to expand across the full screen width without leaving the white bars visible. It should also adapt responsively, which was my initial motivation for learning Bootstrap.