.container {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding-right: 24px;
    padding-left: 24px;
    border: 1px solid #000000;
}
.header,
.footer,
.hero,
.item,
.content {
    padding: 24px;
    border: 1px solid #000000;
}
.header,
.hero,
.items,
.content
 {
    margin-bottom:16px;
}
.header,
.footer,
.item {
    background-color: #eeeeee;
}
.hero,
.content {
    height: 300px;
}
.items{
    display: flex;
}
.item{
    width: 49%;
    height: 200px;
}
.item:first-child{
    margin-right: 2%;
}
@media(max-width:767px){
    .container {
        width: 100%;
        margin: 0;
    }    
}