с большими белыми полосами слева и справа от стола.
Я действительно не хотел просить о помощи, поскольку я очень плохо знаком с Bootstrap и HTML в целом, но я боролся с этим в течение недели безрезультатно.Я пробовал различные решения, предложенные на Stack Overflow и других сайтах.Я честно пробовал так много вещей, что я не могу вспомнить все, что я пробовал.Вдобавок ко всему, я попытался поместить таблицу в отдельный контейнер, добавить строки в тот контейнер, который у меня сейчас есть, добавить фоновое изображение в нескольких местах и многое другое.Я уверен, что я делаю что-то глупое здесь, и я заранее извиняюсь.Спасибо за любую помощь, которую вы можете предоставить.
<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>
Здесь - это изображение того, как выглядит страница.Я хочу, чтобы это выглядело так, за исключением того, что фон занимает всю ширину экрана, не оставляя белых полос по бокам.Я также хочу, чтобы он был отзывчивым, поэтому я и попытался изучить Bootstrap.