Clip path is not working without display:flex property

Question

I am applying clip path to my div 1 and div 2 but i don't know why its working only for div 2.

while trying i found that using display:flex in body tag,its working fine for both the div but using that property,most of my div styling is getting changed. Since my site is almost complete i don't want to touch other div styling.

so is there any other alternative way so that clip path works for both the div without using flex property.

Please help me as i am struck on this for a long time!!

HTML CODE

    <section id="particles-js"></section>
    <div class="about-page"><p>DIV 1</p></div>
    <div id="Project"><p>DIV 2</p></div>
    <div class="contact-me-div" id="contact-id"></div>
    <div class="footer z-depth-5"></div>

CSS

body
{
    font-family: 'Ubuntu',sans-serif;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    margin: 0px;
}
p
{
    font-size: 50px;
    font-weight: 800;
    text-align: center;
}

#particles-js
{
    height: 50vh;
    width: 100%;
    background: #0F2027;   
    background: linear-gradient(to top right, #112128,#274a5a, #203A43, #0F2027,#081014);   
    overflow: hidden;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: center;
    line-height: 1.2em;
    z-index: 5;
}

.about-page
{
    z-index: 1;
    padding-bottom: 150px;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    background: #f5f5f5; 
    height: 300px;
}

#project
{
    z-index: 0!important;
    background: #eee url("https://subtlepatterns.com/patterns/extra_clean_paper.png");
    padding-top: 170px;
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0 90%);
    padding-bottom: 100px;
    margin-bottom: 0;
    height: 500px;
    margin-top: -120px;
}
.contact-me-div
{
    height: 500px;
    margin: 0;
    padding: 0;
    margin-top: -120px;
    background: #0F2027;   
    background: -webkit-linear-gradient(to top, #2C5364, #203A43, #0F2027);  
    background: linear-gradient(to top right, #2C5364, #203A43, #0F2027);  
}
.footer
{
    width: 100%;
    text-align: center;
    bottom: 0;
    height: 240px;
    background-color: #112233;
}

how I Want it How its appearing with flex property commented.