Text not aligning correctly (HTML & CSS)

Issue

I'm making a website and I have a problem with some text not aligning correctly in a div. This is the Code:

.about-div {
  display: grid;
  place-items: center;
  margin-top: 7.5rem;
  margin-left: 5rem;
  margin-right: 5rem
}

.about-div h1 {
  margin-bottom: 1rem;
}

.about-div p {
  margin-bottom: 1rem;
}

<div class="about-div">
  <h1>Lorem ipsum</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at risus lobortis, tristique felis in, tempor magna.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at risus lobortis, tristique felis in, tempor magna.<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Lorem ipsum</p>
</div>

The problem is that the second sentence in the paragraphs that have <br> are aligned to the left.
Also, when you make the browser window smaller in width, the text moves to the left before making new lines instead of staying aligned to the center. Does anyone know how to fix this?

Solution

You should update the CSS code and add the .about-div p selector. Modify it as follows:

.about-div p {
 text-align: center;
 }

and it's done.

Answered By - Aria Noorghorbani