html ・CSSについて教えてください

今、HTMLとCSSの勉強をしています。

borderを適用した際に下記のような画像のように枠からはみ出してしまいました。

この枠からはみ出したのを解決したいのですがどうすればよろしいでしょうか。
コードは下記に記します。
よろしくお願いいたします。

HTML

<!DOCTYPE HTML> <html lang="ja"> <head></head> <meta charset="utf-8"> <title>練習用</title> <link rel="stylesheet" href="style.css"> </head> <body> <div> <div class="border"> <h1>喫茶店紹介</h1> </div> <div class="shop"> <p>私の好きな喫茶店について紹介します</p> <ul> <li>スターバックス・コーヒー</li> <li>ドトール</li> <li>コメダコーヒー</li> </ul> </div> </div> </body> </html>

CSS

body {
background-color: #fffacd;
}

div {
width: 500px;
margin: 0 auto;
background-color: #deb887;
}

h1 {
margin: 20px;
}

.border h1{
display: inline-block;
border-bottom: solid 2px;
}

.border {
text-align: center;
}

p {
text-align: center;
}

ul {
margin: 40px;
}

.shop {
border: solid 2px;
margin-right: 0px;
}

m.ts10806

2019/09/22 10:08

コードはマークダウンのcode機能を利用してご提示ください。またタイトルには要件を記載してください。タグにある内容などは基本不要ですし「教える」のは質問投稿という時点で分かっていることなので、起きている問題やうまくいかないことの詳細など、具体的な要件を記載するようにしてください。 ※質問は編集できます

takashiogino

2019/09/22 12:32

ご指摘ありがとうございます。以後、気をつけます。

m.ts10806

2019/09/22 21:37

質問はいつでも編集できますので今回からやってみませんか？

行動規範の内容に同意します

回答2件

規定値ではborderはwidthに含まれません。
つまりwidthが500pxのボックスにborderを2pxで設定したら結果的にwidthは504pxになってしまいます。
box-sizing: border-boxを設定するとwidthが500pxのボックスにborderを2pxで設定したら結果的にwidthは500pxになります。

投稿2019/09/22 09:52