Currently utilizing Bootstrap 5 and incorporating columns within the framework. However, encountering an issue where there is black space on the right side of the screen and certain content disappearing on the left side as demonstrated here. Here is the code snippet:
<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>Utilizing basic html, css, and js skills to craft frontend websites with subtle 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>Leveraging frontend and backend expertise to create comprehensive sites suitable for a wide range of 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>Implementing Node.js and express.js for backend site development, requiring frontend files for integration.</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;
}
Attempted solution: Adjusting margins without success.