Tạo bố cục đóng hộp trong chủ đề mẫu của Genesis

Hôm nay, tôi vừa kiểm tra diễn đàn SP và ai đó muốn thiết kế bố cục đóng hộp trong Chủ đề mẫu của Genesis. Tôi vừa chỉnh sửa một số CSS và thêm một số CSS mới trong tệp style.css và tạo bố cục Đóng hộp. Mong rằng bài viết này cũng sẽ giúp ích cho người khác. Đây là bước của tôi:

Tôi đã thêm CSS mới này

.site-container {
  background: #fff;
  box-shadow: 0 0 3px #c8c8c8;
  -webkit-box-shadow: 0 0 3px #c8c8c8;
  -moz-box-shadow: 0 0 3px #c8c8c8;
  -o-box-shadow: 0 0 3px #c8c8c8;
  margin: 40px auto;
  max-width: 1200px;
}

Tôi đã sửa đổi CSS sau

Đi tới Dòng số 1053 và thay thế CSS hiện tại bằng

.nav-primary {
  background-color: #333;
  padding: 0 40px;
}

Đi tới Dòng số 882 và thay thế CSS hiện tại bằng

.site-header .wrap {
  padding: 40px;
}

Đi tới Dòng số 1085 và thay thế CSS hiện tại bằng

.entry {
    margin-bottom: 40px;
    padding: 0 40px 50px;
}

Đi tới Dòng số 1148 và thay thế CSS hiện tại bằng

.pagination {
    clear: both;
    margin: 40px;
}

Đi tới Dòng số 1274 và thay thế CSS hiện tại bằng

.footer-widgets {
  background-color: #333;
  clear: both;
  padding: 40px 40px 0;
}

Tôi đã thêm CSS này trong phần truy vấn phương tiện

@media only screen and (max-width: 767px){
  body {
    padding: 0 3%;
  }
}