#container {
border-radius:  50px;
/*height:  500px; */
/* width can not exceed 100% if you add in margin+padding */
width: 50%;
float:  left;
/* this makes the div float up, to left, aka centered */
margin-left:  0%;
/* margins use up more than 20%*/
padding: 5%;
/* padding right and left are not 20% */
background-color: floralwhite;
font-size: 30pt;
font-family: Times New Roman;
}
/*end of container*/

div {
	 border: 2px solid black;
	border-radius: 20px;
	color: black; 
}

.smallbox {
height : 50px;
width: 200px;
background-color: red;
float: left;
clear: right;
padding: 30px;
margin-right: 5%;
}

.mediumbox {
height: 70px;
width: 1400px;
background-color: yellow;
float: left;
clear: left;
padding: 10%;
margin-left: 90px;

}

.largebox {
height: 100px;
width: 900px;
background-color: lightcoral;
float: left;
clear: right;
padding:30px;
margin-right: 37%;
margin-bottom:  ;
}

.purplebox {
height: 1000px;
width: 1600px;
background-color: palevioletred;
float: left;
clear: ;
padding:	5%;
}

img {
	float: left;
	height: 100%;
	width: 50%;
	margin-left:;
	margin-top: ;
	clear: left;
}

.largerbox {
height: 900px;
width: 500px;
background-color: lightcoral;
float: left;
clear: right;
padding:30px;
margin-left: 1000px;
margin-top: -65%;
}