各要素の左右の幅を揃えたい

Question

画像の様に各要素を点線の幅に左右を合わせたいのですが、どのようにしyたら良いのでしょうか。
containerを使用したりしているんですが、画面の横幅を広げると各要素たちの左右がバラバラになってしまいます。

Answer 1

containerをご利用とのことですから、ラップして最大幅を設定し、中身を100%幅に設定すればよいのでは？

<style>
.wrap{
  max-width:800px;
  background-Color:gray;
  margin:auto;
}
header{width:100%; background-Color:yellow;height:200px}
main{width:100%; background-Color:lime;height:120%;}
footer{width:100%; background-Color:aqua;height:200px;}

</style>
<div class="wrap">
<header>header</header>
<main>main</main>
<footer>footer</footer>
</div>

Comments

[shin]

ありとうございます！
素晴らしく解決しました。