I am facing some challenges when trying to center text within a specific section of my webpage, particularly in the mobile view. This section is identified by the class about and is contained within a container-fluid div. I also encountered an issue where there was blank space on the sides of this section, which was not filled with the background color as desired (I temporarily fixed it by adding color to the body element). My goal is to have the text centered and fill 80% of the screen width.
https://i.sstatic.net/oiSn4m.jpg
Check out the CodePen link for reference.
Here is the snippet of HTML code pertaining to 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>.....</p>
</div>
</div>
</section>
The relevant CSS styling for the section is as follows:
.about {
padding: 3em 0;
}
.about p {
text-align: left;
width: 80%;
}
/* Additional styling */
.about .row {
width: 100%;
}
@media screen and (max-width: 767px) {
.about {
padding: 2em;
}
.about p {
font-size: 15px;
}
.portrait {
height: 250px;
margin-bottom: 1em;
}
}