Untitled

HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus repudiandae, molestias adipisci ipsa eius deleniti labore pariatur amet fugit neque, quos voluptatum quod quae molestiae sed officia, architecto ipsum nulla non impedit, repellat iure suscipit atque doloremque. Esse, debitis, laboriosam.</p>
  <div class="container">
    <div class="box box1">Box 1</div>
    <div class="box box2">Box 2</div>
    <div class="box box3">Box 3</div>
    <div class="box box4">Box 4</div>
    <div class="box box5">Box 5</div>
    <div class="cf"></div>
  </div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores expedita laborum beatae nemo, repudiandae placeat, iusto, omnis at suscipit eaque deleniti libero. Nihil at facilis ex perspiciatis nobis, debitis, ea sequi, autem iste beatae sapiente numquam, distinctio adipisci unde. Aut.</p>
</body>
</html>

CSS:
.container {
  outline: thin solid red;
  background-color: yellow;
  max-width: 500px;
  margin: 10px auto;
  padding: 10px;
}

.box {
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  margin: 10px;
  background-color: navy;
  color: white;
}