Why my first title isn't center like the second title? - html

Question

I would like to center correctly my title Learn About Us like for the title What we do, because there is a lag with the picture, I think?
I don't understand how to center like this example:
Here, the titles are aligned correctly.
I thank you in advance for your help and your time.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yooga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis
ornare
velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non
nisl
nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>

Answer 1

Since you have added -45px margin-left for .section-header p::before, you need to add +45px margin-left to .content .section-header p, to cancel out the effect.
h2 {
font-size: 2.5rem;
color: rgb(28, 19, 37);
margin: 0;
}
p {
color: rgb(134, 134, 134);
margin: 1rem 0;
line-height: 1.5;
}
button {
outline: none;
border: none;
border-radius: 0.25rem;
background: rgb(28, 19, 37);
color: #F7CAC9;
font-size: 1rem;
letter-spacing: 0.5px;
text-decoration: none;
padding: 1rem 1.5rem;
}
.container {
display: flex;
font-family: sans-serif;
max-width: 1000px;
margin: 2rem auto;
}
.container img {
height: 350px;
margin: 1rem;
}
.section-header p {
position: relative;
}
.content .section-header p{
margin-left: 45px;
}
.section-header p::after,
.section-header p::before {
position: absolute;
content: "";
height: 2px;
width: 35px;
background: #F7CAC9;
z-index: -1;
}
.section-header p::after {
top: 11px;
margin: 0 10px;
}
.section-header p::before {
top: 11px;
margin-left: -45px;
}
.service .section-header {
width: 100%;
text-align: center;
}
<div class="about">
<div class="container">
<img src="https://zupimages.net/up/21/21/54ov.png" alt="Image">
<div class="content">
<div class="section-header">
<p>Learn About Us</p>
<h2>Welcome to Yoga</h2>
</div>
<div class="about-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra quis sem. Curabitur non nisl nec nisi scelerisque maximus.
</p>
<button>Learn More</button>
</div>
</div>
</div>
</div>
<!-- About End -->
<br />
<!-- Service Start -->
<div class="service">
<div class="container">
<div class="section-header">
<p>What we do</p>
<h2>Yoga For Health</h2>
</div>
</div>
</div>