I’m trying to get my paragraph nice and centered within its container. However it keeps pushing to the right side of the screen and the dot points won’t list. I’ve deleted and rewritten the code, asked chatgpt and Gemini to fix it and neither can. I’ve put the code through a html and css validator and it all comes back fine so whatever I’m doing wrong I doing it wrong right.

I’ve tried the following:

added an about list class to the html which I hoped would make the list but its still in a line.
Changed margin-bottom under the about-list li which done nothing.
Change the .about-list list-style-type from none to disc which changed nothing.
Added .about-content text-align center which pushed the text further right???

HTML

  <div class="about-section">
    <div class="about-image">
        <img src="Images/jonathan-borba-AgygcLrWRbk-unsplash.jpg" alt="About Image">
    </div>
    <div class="about-content">
        <h2>About Lilac Valley</h2>
        <p class="about-paragraph">Escape to <em>Rustic Luxury</em> at Lilac Valley Farm Stay. Imagine waking up to the gentle sounds of a farmyard,
            surrounded by the breathtaking beauty of the <strong>Blue Mountains</strong>. Lilac Valley Farm Stay is your
            invitation to unwind and reconnect with nature in a beautifully restored luxury barn house. This hidden gem,
            lovingly renovated by local interior designer <strong>Marina Ye</strong>, offers a unique blend of rustic charm
            and modern comfort. Spread over four acres, the property boasts:</p>
        <ul class="about-list">
            <li>A stunning open-plan barn house, perfect for families or groups.</li>
            <li>An enchanting cottage garden bursting with colorful blooms.</li>
            <li>A refreshing plunge pool to cool off after a day of exploring.</li>
            <li>Friendly farmyard companions – sheep, chickens, ducks, and the ever-so-charming Rosie the goat.</li>
        </ul>
        <p>Lilac Valley Farm Stay has been a favorite amongst AirBnB guests and has even garnered attention online.
            <strong><em>Get ready for an unforgettable escape.</em></strong></p>
    </div>

CSS

`.about-section {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
    background-color: #5c4033;
}`

`.about-image {
   flex: 0 0 50%; /* Take up 50% of the width */
   padding-right: 0px; /* Add some spacing between image and text */
   padding-top: 10px;
}`

`.about-image img {
   width: 50%; /* Ensure image doesn't exceed its container */
   height: auto; /* Maintain aspect ratio */
   margin-left: 245px; /*added pace to the left*/
}``


`/* Style the rest of the content as needed */
.about-content h2 {
   font-size: 3em; /* Adjust heading size as needed */
}`

`
.about-content {
   text-align: center; /* Center align the text */
}`

`.about-paragraph {
   text-align: justify; /* Justify the text within the paragraph */
}`

`.about-list {
   list-style-type: disc; /* Use disc as list style */
   text-align: left; /* Align list items to the left */
   padding-left: 20px;
}`

`.about-list li {
   margin-bottom: 10px; /* Add margin between list items */
}`