div {
float: left;
clear: both;
}

img{
width: 60%;
margin-left: 20%;
}


#container{
background-color: red;
margin-bottom: 40px;
width: 80%;
margin-right: 10%;
margin-left: 10%;

}

.headerofmenus{
width: 90%;
margin-left: 5%;
background-color: orange;
height: 200px;
}

.menubox {
width: 14%;
margin-top: 30px;
margin-bottom: 10px;
text-align: center;
background-color: darkorange;
font-size: 26pt;
clear: none;
}


.contentarea {
background-color: lightcoral;
width: 80%;
margin-right: 10%;
margin-left: 10%;
margin-top: 10px;
font-size: 27px;
}



/* saw a video on how to do this " " between div and hover */

/* selects all a elemwents   */

a div:hover{
	color: blue;
	background-color: yellow;
}