コーディングの必須事項。重要な要素に意識を向けよう！

<div class="box">

 <div class="box__inner">

  <div class="box__body box1 bg-blue">box1</div>

  <div class="box__body box2 bg-black">box2</div>

 </div><!-- /.box__inner -->

</div><!-- /.box -->

.bg-blue {
  background-color: #3898e0;
}

.bg-black {
  background-color: #323232;
}

.box {
  border: 1px solid #d5dfef;
}
.box__inner {
  justify-content: center;
  padding: 50px 0;
}
.box__body {
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-size: 1.5em;
}
.box .box1 {
  margin: 0 auto;
}
.box .box2 {
  margin-top: 20px;
  margin: 0 auto;
}

margin: 0 auto;
margin-top: 20px;

<link href="./stylesheets/style.css" rel="stylesheet" />
<link href="./stylesheets/reset.css" rel="stylesheet"/>

<script src="js/index.js"></script>
<link href="./stylesheets/style.css" rel="stylesheet" />

.my-class {
  color: red;
}

div.my-class {
  color: red;
}

div .my-class {
  color: red;
}

#my-id .my-class {
  color: red;
}

<div id="container">
  <p class="text">Hello, world!</p>
</div>

#container p.text {
  color: blue;
}

p {
  color: red;
}

<div class="parent">これは親要素です。
  <div class="child">これは子要素です。
   <div class="grandchild">これは孫要素です。</div>
  </div>
</div>

.parent {
  color: #3898e0;
  font-size: 20px;
  text-align: center;
}

<div class="box">
  <div class="box__inner wrap-200">
    <img src="./images/icon/html.png" alt="">
  </div>
</div>

.box {
  text-align: center;
}