I am struggling to center my paragraph text while adjusting the width. Here is the HTML code I am working with:
<section class="sss">
<div class="s-footer">
<h3>Like what you see?</h3>
<p>Hire me</p>
</div>
<div class="nav-footer">
<nav class="list">
<ul>
<li><a href="#">My work</a></li>
<li><a href="#">My skills</a></li>
<li><a href="#">Hire me</a></li>
</ul>
</nav>
<a href="index.html" class="logo-2">Alkhazriji</a>
</div>
</section>
Here is my CSS code inside the media query:
.s-footer p
{
display: block;
width: 50%;
text-align: center;
}
And before the media query, here is the CSS code:
.s-footer p
{
background: #852EF8;
border-radius: 50px;
margin: 0 5em;
font-size: 1.5em;
width: 33.33;
font-weight: bold;
color: #FF57E9;
cursor: pointer;
display: block;
position: relative;
}
.sss
{
padding-top: 0;
margin-top: 0;
display: block;
padding: 0;
}
I have tried various methods like text align, position, grid, and display to center the paragraph text, but when I adjust the width it shifts to the left side. Any advice would be greatly appreciated. (I'm new to coding so please bear with me).