サイズの違う下線を引く

main h2 {
    font-size: 16px;
    text-align: center;
    padding: 10px;
    margin-bottom: 35px;
    font-weight: bold;}
main h2::after {
    content:””;
    border-bottom: 1px solid #000;
    width: 20px;
    padding-top: 10px;
    display: block;}

afterの前に::
contentとdisplay:block;を忘れないように。

FlexBox

親要素に、display:flex;
子要素に、flex:(数字);

(数字)は、幅のpxなどを指定するのではなく、比率を指定する。
子要素が3つある場合、flex:1;flex:2;flex:1; と指定すると、真ん中の要素は両脇の要素の2倍の幅になる。

IE10,11で子要素から中身がはみ出す時 「-ms-flex: 0 1 auto;」