How to fix grey space of right and left side of webpage - html

Question

I m using bootstrap 5 and using columns with it.
However, after doing there is black space on the right side of the screen and left side of the screen some content is disappearing as shown here
Code:
<div id="skills">
<div id="container">
<div class="row">
<div class="row align-items-center">
<div class="col align-self-center">
<img height="50%" width="50%" src="./images/frontend.png" alt="frontend img">
<h2>Frontend Development</h1>
<p>I use simple html, css, and js skills to create your frontend websites, with slight animations.</p>
</div>
<div class="col align-self-center">
<img height="50%" width="50%" src="./images/full-stack-developer-icon.png" alt="fullstack img">
<h2>Full Stack Development</h2>
<p>I use the skills of frontend and backend combined to create your site. Recommened for most users.</p>
</div>
<div class="col align-self-center">
<img height="50%" width="50%" src="./images/backend.png" alt="backend img">
<h2>Backend development</h2>
<p>I use Node.js and express.js to create your backend site. Requires frontend files.</p>
</div>
</div>
</div>
</div>
</div>
Css:
#skills p {
font-family: "Dancing Script", sans-serif;
font-weight: bold;
font-size: larger;
}
#skills h2{
font-family: "Solitreo", sans-serif;
}
What I tried:
setting margin didnt work

Answer 1

You have an extra row that you don't need on your line 3
<div id="skills">
<div id="container">
<div class="row align-items-center">
<div class="col align-self-center">
<img height="50%" width="50%" src="./images/frontend.png" alt="frontend img">
<h2>Frontend Development</h2>
<p>I use simple html, css, and js skills to create your frontend websites, with slight animations.</p>
</div>
<div class="col align-self-center">
<img height="50%" width="50%" src="./images/full-stack-developer-icon.png" alt="fullstack img">
<h2>Full Stack Development</h2>
<p>I use the skills of frontend and backend combined to create your site. Recommened for most users.</p>
</div>
<div class="col align-self-center">
<img height="50%" width="50%" src="./images/backend.png" alt="backend img">
<h2>Backend development</h2>
<p>I use Node.js and express.js to create your backend site. Requires frontend files.</p>
</div>
</div>
</div>
</div>