親タグにwidthを％でつけてheigthをついかしないと
子タグが大きいときにはみ出す

display: flex;
を親に記入して横並びにした下に
justify-content: space-around;など記入して配置位置を設定

  • flex-start（初期値）… 行の開始位置から配置。左揃え。
  • flex-end … 行末から配置。右揃え。
  • center … 中央揃え
  • space-between … 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
  • space-around … 両端の子要素も含め、均等に間隔をあけて配置
  • justify-content: space-evenly;　新しいらしい

メディアクエリ

  • <meta name=”viewport” content=”width=device-width,initial-scale=1.0,viewport-fit=cover”>
    をHTMLに入力
  • https://samplesdl.me/training_html-css/rwd_sample/
  • 1280px（PC）、960px（タブレット）、640px（スマホ）と認識してみましょう。これはブレイクポイントと言う