レスポンシブ設定

cssメディアクエリの設定

要素のプロパティと値を、横幅サイズによって変えることができます。
対象となるcssのセレクタの下に
@media screen and ( 画面幅の条件 ) {
　　セレクタ{ プロパティ:値; }
}
として、同じセレクタ名を囲います。
レスポンシブコーディングは、このようにまず分岐点ブレイクポイントを設定してデザインをしていきます。
このときの条件はmax-width: 1024pxやmin-width: 768pxと言った具合に、 指定された***-width:***pxの範囲内では{ }の中のセレクタの内容が反映されます。

@media screen and (max-width: 768px) { /* 最大768pxまで */
.header {
width: 85%; /* SPの時は横幅100%にしたいのでwidth:100%;に書き換える */
background-color:red;
margin: 0 auto; /* PC用と同じで良いので削除 */
display: flex; /* PC用と同じで良いので削除 */
justify-content: space-between; /* PC用と同じで良いので削除 */
align-items: center; /* PC用と同じで良いので削除 */
flex-direction: column; /* SPの時だけに適用したいので新しく記述 */
}

例

@media screen and (max-width: 768px) {  /* 最大768pxまで */
    .header {
      width: 85%;                      /* SPの時は横幅100%にしたいのでwidth:100%;に書き換える */
      background-color:red;  
      margin: 0 auto;                  /* PC用と同じで良いので削除 */
      display: flex;                   /* PC用と同じで良いので削除 */
      justify-content: space-between;  /* PC用と同じで良いので削除 */
      align-items: center;             /* PC用と同じで良いので削除 */
      flex-direction: column;          /* SPの時だけに適用したいので新しく記述 */
    }