body {
width: 960px;
margin: 30px auto;
background: black;
}

main {
display: flex;
}

.padding_this{
padding: 15px;
}

.logo,
.navigasi,
.hero,
.konten,
.sidebar,
.footer {
margin-bottom: 5px;
padding: 15px 0;
}

.logo {
width: 100%;
height: auto;
background: #99D9EA;
text-align: center;
color: #fff;
list-style: none;
}

.hero {
    width: 100%;
    height: auto;
    background: #99D9EA;
    text-align: center;
    color: #fff;
    list-style: none;
}

.navigasi {
width: 100%;
height: auto;
background: #99D9EA;
text-align: center;
}
.konten {
width: 70%;
background: #EFE4B0;
text-align: justify
}
.sidebar {
width: 30%;
background: #FD7E00;
}
.footer {
width: 100%;
background: #C3C3C3;
text-align: center;
}

.navigasi ul{
padding: 0;
list-style: none;
display: inline-block;
margin: 0;

}
.navigasi li{
float: left;
margin: 0 10px;
}
.image { 
    width: 100px;
    height: 100px;
}
.image2 { 
    width: auto;
    height: 100px;
}
.image3{
    width : 100%;
    height : 300px;
}

.navigasi ul li a{
     text-decoration: none;
    
}
.navigasi ul li :hover{
    background-color: red;
}