固定ページの幅を短く調節する方法

真っ白なページにワードプレスでLPを作ろうと思ったとき、
最初に困ったのがこれ。

画面いっぱいやん！！！
左右に少しマージンを取りたいと思ってもどうやったらいいのか？全く理解できない。

そう思って散々検索して解決しました。

DIVを使って、幅を指定して、左右に少しマージンをあける方法

<div style="width: 80%; margin: auto;">
 横幅を80%
 左右にマージンが10%ずつ 
</div>

最初の失敗がこれ
margin: auto;　をつけないと、
全体の幅は80%のサイズになるんだけど、左に寄ってしまいます。

<div style="width: 80%;">
 横幅を80%になるが、全体が左寄せになってしまう。
</div>

で、次に考えたのが
centerタグでdivの上から囲う方法

<center>
<div style="width: 80%;">
横幅は80%になる。
文字全体がセンターリングされてしまうのでとても読みヅライ記事になってしまう
</div>
</center>

これは、div以下の要素がすべて中心によってしまうので、これも駄目でした。

散々検索した結果探したのが、これ。

<div style="width: 80%; margin: auto; background-color: #EDF7FF;">
 横幅を80%
 左右にマージンが10%ずつ 
</div>

最後はdivで囲む場合の背景色を入れるbackground-color　も記載しました。
divを使いこなすと、サイトをきれいに作れるようになるので、一緒に勉強していきましょう！