styles.css

* {
  box-sizing: border-box;
}

h1 {
  font-family: monospace;
text-align: center;
}



.content{
  border: 5px;
  width: 300px;
  height: 200px;
  float: left;
  margin-right: 30px;
  
}

.content1 {
  background-color: turquoise;
}

.content2 {
  background-color: yellow;
}
.content3{
  background-color: yellowgreen;
}

h3{
  text-align: right;
  background-color: peachpuff;
  border: 1px solid black;
  width: 30%;
	margin-left: 70%;
  margin-bottom: 0;
	margin-top: 0;
	padding: 5px;

 
}

/*compus*/
@media (min-width: 992px) {
  .content,.content1,.content2,.content3{
    float: left;
    
  }
    
    
  }

  @media (min-width: 768px) and (max-width: 991px) {
    .content,.content1,.content2,.content3{
      float: left;
     
    }
  }


  @media (max-width: 768px) {
     .content,.content1,.content2,.content3 {
      float: left;
      
     }
    }