* {
    box-sizing: border-box;
  }
  
 body {  
    font-family: Arial, sans-serif;
    margin: 0;  
    padding: 0;
  
  }
  
.clear {  
    clear: both;  
  }
  
h1 {  
    text-align: center;  
    padding: 50px 10px;  
    color: white;  
    background-color: rgb(78, 146, 179);  
  }
  
.colors > input {  
    padding: 20px;  
    border: none;  
    font-size: 18px;  
    margin: 0;  
    float: left;  
    width: 25%;  
    color: white;  
  }
  
.instructions {  
    max-width: 1280px;  
    padding: 20px;  
    margin: 0 auto;  
    margin-bottom: 50px;  
  }

.float-box:nth-child(1) {background-color: rgb(255, 125,  78);}
.float-box:nth-child(2) {background-color: rgb(168,  89,  60);}
.float-box:nth-child(3) {background-color: rgb( 33, 165, 121);}
.float-box:nth-child(4) {background-color: rgb( 47,  83, 160);}
.float-box:nth-child(5) {background-color: rgb(197,  56,  56);}
.float-box:nth-child(6) {background-color: rgb(112, 158,  94);}
.float-box:nth-child(7) {background-color: rgb(182, 109, 197);}
.float-box:nth-child(8) {background-color: rgb(167,  35,  79);}
.float-box:nth-child(9) {background-color: rgb( 38, 189, 189);}

.container{
  background-color: grey;
}

.container-01 {
  text-align: center;
  font:bold;
  font-size: 32px;
  color: white;
}

.container-01 > .float-box {
  width:100%;
}

.container-02 {
  text-align: center;
  font:bold;
  font-size: 32px;
  color: white;
}

.container-02 > .float-box {
  float: left;
    width:50%;
  }

.container-03 {
    text-align: center;
    font:bold;
    font-size: 32px;
    color: white;
  }
  
.container-03 > .float-box {
  float: left;
  width:calc(100% / 3);
  }

  .container-04 {
    text-align: center;
    font:bold;
    font-size: 32px;
    color: white;
  }
  
.container-04 > .float-box {
  float: left;
  width:25%;
  }