Blog.css

{
    padding: 0;
    margin: 0;
}
body{
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
grid-template-areas: "header" 
                     "nav"
                     "main"
                     "footer";
background: rgb(0, 183, 255) ;
background-image: url("./images/Screenshot\ \(25\).png");
}
nav{
    display: flex;
    justify-content: space-between;
    grid-area: nav;
    background-color: lightblue;
    color: rgb(255, 0, 0);
    line-height: 10vh;
}

nav ul{
    display: flex;
    justify-content: space-around;
    list-style: none;
    width: 70vw;
}
.NAMES{
    display: flex;
    position: relative; 
    top: 200px;
    left: 0px;
}
.PROJECT span{
    position: relative;
    top: 00px;
    right: 0px;
}
.Project2 span{
    position: relative;
    top: 00px;
    right: 0px;
}
.Project3 span{
    position: relative;
    top: 00px;
    right: 0px;
}
.PROJECT{
    display: flex;
    width: 300px;
    height: 300px;
    padding-left:  100px; 
    padding-right: 200px; 

}
.Project2{
    display: flex;
    width: 300px;
    height: 300px;
    padding-left:  20px; 
    padding-right: 200px; 
}
.Project3{
    display: flex;
    width: 30px;
    height: 300px;
    padding-left:  20px; 
    padding-right: 200px; 
}