Why is the 500px padding for the div not working?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <nav>
        <navl>
            <ul> 
                <li><img src="home.png" alt="logo"></li>
                <li class="src"><input type="search"></li>
                <li><img src="search.png" alt="hit"></li>
            </ul>
        </navl>

        <navr>
            <ul>
                <li><img src="party.png" alt="dp" style="width: 30px;" ></li>
                <li style="font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; color:white;padding-top: 6px;">Jason</li>
                <li>i1</li>
                <li>i2</li>
                <li>i3</li>
                <li>i4</li>
                <li>i5</li>
            </ul>
        </navr>
    </nav>
    <main>
        <left>
            <span>left</span>
        </left>
        <content>
            <cover>

            </cover>
            <interact>
                <l-int>

                </l-int>
                <r-int>

                </r-int>
            </interact>
            <feed>
                <center>
                    <post>
                        <headd>
                            <img s id="pp" src="dp.jpg"" srcset="">
                            <det>
                            <a style="text-decoration: none;" href=""> Jason </a>
                                <t sxtyle="border: 2px blue groove;">
                            <span style="font-size: small;"><br>1 yr </span>
                         <img src="globe.png" alt="" width="17px" height="17px" >      
                        </t>
                        </det>
                        
                        </headd>
                        <span>The best part of the day ! The logo of the free online
                             encyclopedia Wikipedia is an unfinished globe constructed
                             from jigsaw pieces—some pieces are missing 
                             at the top—each inscribed with a glyph from a different writing system <br> </span>

                             <img id="pp2" src="postt22.jpg" alt="">
                    </post>
                </center>
                <right>
                    <span>right</span>
                </right>
            </feed>
        </content>
    </main>


</body>

</html>
*{
    padding: 0vw;
    margin: 0vw;
}

nav{
    background-color: rgba(52, 52, 146, 0.829);
    display: inline-flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 45px;
    position:sticky;
    top: 0px;
}

ul {
    display: inline-flex;
    list-style-type:none;

}

navl{
    border-color:red ;
    border-style: dotted;
    align-items: center;}
navr{
    border-color:red ;
    border-style: dotted;

}

main{
    justify-content: space-between;
    display: flex;
}
left{
    border-color: red;
    border-style: dotted;
    width: 30vw;
    height: 400px;
    display: inline-flex;
    position: sticky;
    top: 45px;
}
center{
    border-color: red;
    border-style: dotted;
    width: 30vw;
    height:5000px;
    display: inline-flex;
    overflow: hidden;
}
right{
    border-color: red;
    border-style: dotted;
    width: 27vw;
    height: 300px;
    display: inline-flex;
}

cover{
    border-style: dashed;
    border-color: red;
    width: 60vw;
    height: 350px;
    background-image: url(cover.jpg);
}

content{
    display:flex;
    flex-direction: column;
}

main{
    padding: 0px 60px;
    border:10px greenyellow double ;
}

interact{
    width: 60vw;
    height: 30px;
    border: 5px blue dashed;
}

feed{
    margin-top: 20px;
}

.src{
    
}

body{
    background-color: rgba(33, 59, 82, 0.473);
}
}

#pp{
    width: 30px;
    height: 30px;
}

headd{
    padding: 10px;
    border: 2px rgb(106, 17, 207) groove;
    display: flex;
    flex-direction:row;
    width: 28vw;   
    height: 30px; 
    margin-bottom: 20px;
}

post{
    background-color: azure;
    margin: 1px;
    padding: 2px 500px 2px 2px;
    text-align: left;
}
#pp2{
    width:100px
    height:100px;
    margin-top:  20px;
}

Why is the 500px padding for the div not working? Only the code within the div would be needed for this question. I am a beginner trying to learn web development using HTML,C CSS AND JAVASCRIPT. I am trying to make a facebook clone. Any help would be appreciated regarding
this problem……….. Thank you