Paragraph will not center using css commands - html

Question

Hey I am confused since I am trying to center a paragraph for instance it wont do anything i tried text-align, align center, inline block and so on.
HTML `
<div class="col-md-6 col-sm-12 picText1">
<p style="background-color:#77b97a;" class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>`
CSS
.picText{
color: black;
border-radius: 20px 20px 20px 20px;
width: 150%;
height: 75px;
padding-top: 2%;
position: relative;
text-align: center;
left: 26%;
}
I also tried using bootstrap command with no luck hope someone can clarify since it works sometimes with text align and so on, but i have put borders around it seems like it wont do anything

Answer 1

You won't need the positioning styles to get the paragraph centered. You can simply specify the width of the element, and then set its margins to 0 auto which will give it 0 margin for top and bottom, and will automatically use the correct left and right margins to make the element centered given its box model and the width of its parent container.
.container {
width: 100%;
}
.picText {
background-color: #77b97a;
border-radius: 20px 20px 20px 20px;
padding: 2%;
text-align: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<p class="picText">Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.</p>
</div>

Answer 2

Using bootstrap, I used a container and centered it using justify-content-center which is simpler than writing css rules in my opinion. You could add your image inside the container and they both will be centered.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container col-md-6 justify-content-center w-50">
<p class="bg-info rounded-lg p-2 mt-3">
Ovenstående billeder er taget fra M.E.G.A spillet, som er en Role-Playing-Game simulation udformet i Unity Virtual-Reality hvor spilleren agerer statsminister, som har ubegrænset kontrol over de danske klimalove samt budgettet som medfølger.
</p>
</div>