如何为此树屋项目执行内容定义的断点？

Question

因此我被要求在705px处编写媒体查询，其中布局开始中断，这迫使grid_1到grid_6跨越容器的100％宽度。

我最初访问了我的css文件的底部并输入以下代码

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

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6, {
    width:100%;
} 

}

以下是该项目的其余相关代码。

.grid_1 { width: 15.625%; } /* 125px/800px = 15.625% */
.grid_2 { width: 32.5%; } /* 260px/800px = 32.5% */
.grid_3 { width: 49.375%; } /* 395px/800px = 49.375% */
.grid_4 { width: 65.625%; } /* 525px/800px = 65.625% */
.grid_5 { width: 83.125%; } /* 665px/800px = 83.125% */
.grid_6 { width: 100%; } /* 800px/800px = 100% */

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6 {
    margin-right: 1.25%;
    float: left;
    display: block;
}
.alpha { margin-left:0; }
.omega {margin-right:0; }

.container{
    width: 90%;
    max-width: 800px;
    padding: 4% 0;
    margin: auto;
}