margin（マージン）とpadding（パディング）を覚える

<div class=”box”>
<div class=”inner”><p>ここに文章があります。</p></div>
</div>

<div class=”box2″>
<div class=”inner”><p>ここに文章があります。</p></div>
</div>

スタイルシート

body { margin: 0; padding:0; background: #f2f2f2;}

.box {
width: 350px;
background: blue;
}
.box .inner, .box2 .inner {
width: 350px;
height:200px;
background: red;
display: flex;
align-items: center;
justify-content: center;
color:#fff;

}
.box2 {
width: 350px;
background: blue;
}