<body>
  <section class="contenedor">
    <div class="casa" id="Gryffindor">Gryffindor</div>
    <div class="casa" id="Hufflepuff">Hufflepuff</div>
    <div class="casa" id="Ravenclaw">Ravenclaw</div>
    <div class="casa" id="Slytherin">Slytherin</div>
  </section>
</body>



.contenedor {
  width: 560px;
  margin: 0 auto;
  display: flex;
}

.casa {
  /*distribución*/
  height: 300px;
  flex-grow: 1;
  /*text*/
  color: white;
  text-align: center;
  font-size: 18px;
  padding-top: 15px;
}

#Gryffindor {
  background-color: #A80102;
}

#Hufflepuff {
  background-color: #786254;
}

#Ravenclaw {
  background-color: #31446F;
}

#Slytherin {
  background-color: #097146;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.