main.container {

margin: 2em 10px;

}

@media screen and (min-width: 700px) {

.wrap {
    width: 700px;
    margin: 0 auto;
}
header {
    padding: 20px 100px;
}

}

@media screen and (max-width: 700px) {

.wrap {
    width: 100%;
}
header {
    padding: 20px 0;
    a.logo-link,
    ul.nav.nav-list {
        float: none;
        display: block;
        text-align: center;
    }
    li.nav-list-item {
        padding: 10px 10px;
    }
}
main.container,
.home.post-list,
.archive {
    margin-top: 0;
}
.archive .post-item {
    padding-left: 20px;
}
.post-content {
    h2, h3, h4, h5, h6 {
        max-width: 300px;
        left: 15px;
    }
}
#comments {
    margin: 2em 10px;
}

}