レスポンシブウェブデザイン入門

http://dotinstall.com/lessons/basic_responsivewebdesign

.container {
    width: 90%;
    margin: 0 auto;
}

section:nth-child(even) {
    background; #fff;
}

.features .item:last-child {
    margin-bottom: 0;
}

/* news */

.news .item {
    text-align: center;
}

.news p {
    text-align: left;
}

/* how-to-use */

.how-to-use iframe {
    width: 100%;
    height :auto;
    postion: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.iframe-wrapper {
    padding-bottom: 56.25%; // %指定で 16:9
    height: 0;
    postion: relative; // 絶対位置
}

------------------------------------------------------------
@media (min-width: 570px) {

.featurs p {
    width: 45%;
}

.featurs img {
    width: 50%;
}

.pull-right {
    float: right;
    padding-left: 5%;
}

.pull-left {
    float: left;
    padding-left: 5%;
}

.featurs .item {
    overflow: hidden;
}

.news .container {
    display: flex; // ある要素に定義するだけで、その直下の要素が並列になるスタイル
    justify-content: space-between;
}

------------------------------------------------------------
@media (min-width: 820px) {

.container {
    width: 820px;
}

.header-pc-menu {
    display: block;
    list-style:none; // liの先頭・変更等
    padding: 0;
    margin: 0;
    float: right;
}

.header-mobile-menu {
    display: none;
}

.header-pc-menu > li{
    display: inline-block; // 表示はインラインボックスだが、ブロックボックスのように高さや横幅、margin、paddingを指定できる
    width: 60px;
    text-align: center;
    cursol: pointer;
}