After making adjustments to the layout of a specific section on my webpage by adding rows and columns, I noticed a blank strip where the background color fails to fill in. The rows within this section are contained within a div class called container-fluid. Despite attempting various solutions such as setting padding to 0 on the sides of the impacted section (with class about), ensuring no margin is applied, and even trying width: 100%, the white space persists. Any suggestions on how to troubleshoot this issue?
For the complete code, you can view it on CodePen. (Please note: remove the body color in the CSS to observe the blank space on CodePen)
Here is the HTML code for the affected section:
<section class="about" id="about">
<div class="row">
<div class="col">
<h2>About</h2>
</div>
<div class="row">
<div class="col-md-5">
<img src="img/circle-portrait-small.png" class="portrait">
</div>
<div class="col-md-7">
<p>..(Removed)..</p>
</div>
</div>
</section>
The CSS applied to the section is as follows:
.about {
background-color: WhiteSmoke;
}
.about {
padding: 3em 0;
}
.about p {
text-align: left;
}
.about .row {
margin-left: 0;
margin-right: 0;
width: 100%;
}