style.css

* 
{
  box-sizing: border-box;
}

body
{
	margin: 0;
	padding: 0;
  font-family: "Comic Sans MS", cursive, sans-serif;
  background-color: #3866cb;
}

.row
{
  margin-top: 5%;
  margin-bottom: 5%;
}

h1 
{
  margin-bottom: 15px;
  text-align: center;
  color: #80b8eb;
  font-size: 50px;
  font-style: oblique;
}


.box
{
  width: 105%;
  overflow: none;
}
.box2
{width: 92.5%;

overflow:none;}

.content-name
{
  overflow: none;
  text-align: center;
  border: 4px solid whitesmoke;
  width: 30%;
  height: 20%;
  padding: 5px;
  float:right ;
  margin-right: 0px;
  margin-top: 0px;
  font-weight: bold;
  position: relative;
}

.content
{
  border: 5px solid whitesmoke;
  width: 90%;
  height: auto;
  margin: 2.5%;
  color: black
  font-size: 25px;
  padding: 2%;
  padding-top: 55px;
  background-color: skyblue ;
}


.name1
{ color : #73cddf ;
  background-color : #051d57;
}

.name2
{
  color : #73cddf ;
  background-color : #051d57;
}
.name3
{ color : #73cddf ;
  background-color : #051d57;
}


/********** Large devices only **********/
@media (min-width: 992px) 
{
  .col-lg-4 {
  	float: left;
    width: 33.33% ;
  }
}
/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) 
{
  .col-md-6,.col-md-12 
  {
    float: left;
  }
  .col-md-6 
  {
    width: 50%;
  }
  .col-md-12 
  {
    margin-right : 0px;
    width: 100%;
  
  }
  .name3
  {
    margin-right: 0px;
    width:30%;
  }
}

@media (min-width: 0px) and (max-width: 767px)
 {
  .col-sm-12 
  {
  	float: left;
    width: 100%;

  }
}