Am I confusing myself here with the CSS flex system?

HTML-CSS
1

I want like a polygon shape in the background of my text and image. however, the text for my header and paragraph keep moving around. I think I have confused myself here but if any of you’s can please look at the code and see what I am doing wrong, that will be really appreciated!

HTML

     <!-- my story -->
    <section id="about-me" class="about-me">
            <div class="container">
            <div class="about-me-header">
                <h2 class="headline">About me</h2>
            </div>
            <div class="about-me-description">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra purus augue, a congue dui lobortis ut. Nullam ut lectus vel felis pellentesque suscipit a vitae augue. Nam pretium congue tempor. Suspendisse eu purus nec tortor lobortis eleifend. Proin eleifend, nisl id finibus pulvinar, libero mi pellentesque ipsum, non faucibus nulla lacus nec mi.
            </p>
        </div>
        </div>
    </section>
    <!-- my story ends -->

CSS

body {
    overflow-x: hidden;
}

section {
    padding: 3.9rem 0;
    overflow: hidden;
}

.container {
width: 100%;
max-width: 122.5rem; /*this means that the container is only going to be 1225 px. once we're under this particular px, the width 100% will take over*/
margin: 0 auto; /*the margin and padding moves the container in the right position so it is not next to the window screen. to center the container*/
padding: 0 2.4rem;

}

/ ABOUT-ME /

.about-me {
    position: relative;
    width: 100%;
    height: 60vh;
    background: linear-gradient(315deg, #485461 0%, #28313b 74%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto; /*the margin and padding moves the container in the right position so it is not next to the window screen. to center the container*/
    padding: 0 2.4rem;
    z-index: -1;
}

.about-me:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: #fff;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    z-index: -1;
}

.about-me-header {
    margin-top: 150px;
}

.about-me h2 {
    font-size: 5.8rem;
}

.about-me-description {
    width: 100%;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-content: flex-end;
    border: 1px solid black;

}

.about-me-description p {
    line-height: 1.6;
    margin-bottom: 2.4rem;
}
2

let me suggest you to create a Pen on CodePen