css - 我如何为这个树屋项目设置内容定义的断点？

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;
}