<!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