Trying to eliminate the white space visible in the image. Utilizing Bootstrap for my project, but still getting acquainted with it. My teacher suggested (without reviewing any code) that a container might be causing the issue. I disagree as the HTML container does not occupy the entire screen. There seems to be something off with an element, but since there's no CSS for the HTML element, could it be related to Bootstrap? Any assistance in identifying the problem would be greatly appreciated. View screenshot highlighting the HTML and the white box on the right side.
.page-break {
background-color: rgb(211, 211, 211);
}
.hero-image {
background-image: url("images/welcome-img.jpg");
background-size: cover;
}
.hero-text {
text-align: center;
color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5c7cacad1d6d1d7c4d5e5908b948b96">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<script
src="https://kit.fontawesome.com/4db53af2d4.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<section class="top-bar">
<div class="row sticky-top">
<img src="images/tux.png" alt="" class="col-2" />
<h2 class="col-5">About Linux</h2>
<div class="col-5 hamburger-menu">MENU</div>
</div>
</section>
</header>
<main>
<div class="hero-image row">
<div class="hero-text">
<h1>FOSS</h1>
<p>And why it's good for you</p>
</div>
</div>
<!-- <section class="hero-section">
<div class="hero-container">
<img src="images/welcome-img.jpg" alt="" />
<h1>FOSS</h1>
<h3>And why it's good for you</h3>
</div>
</section>-->
<section class="articles container">
<article class="manjaro-article">
<div class="container gx-4 mt-4">
<div class="row">
<img src="images/manjaro_scrn.png" alt="" />
</div>
<div class="row py-3">
<img src="logos/manjaro.svg" alt="" class="col-3 pe-4" />
<h2 class="col-9"><b>Manjaro</b></h2>
</div>
<div class="row">
<p>
Is an accessible, friendly, open-source operating system.
Providing all the benefits of cutting-edge software combined
with a focus on getting started quickly, automated tools to
require less manual intervention, and help readily available
when needed. Manjaro is suitable for both newcomers and
experienced computer users.
</p>
<br />
<br />
<p>
Unlike proprietary operating systems you have full control over
your hardware without restrictions. This makes Manjaro a
powerful Operating System ideal in home, work, and development
environments.
</p>
<br />
<br />
<p>
It is easily possible to run many popular Windows applications,
using compatibility software such as Wine, PlayonLinux or Proton
via Steam. The examples given here are far from comprehensive!
</p>
<br />
<br />
<p>
Representing a perfect middle-ground for those who want good
performance, full control, and cutting-edge software but also a
degree of software stability.
</p>
</div>
</div>
</article>
<div class="row page-break">
<div>
<p></p>
</div>
</div>
</section>
</main>
<footer>
<p></p>
</footer>
</body>
</html>