#container {
background-color: navy;
color: black;
/*height: 1800px;*/
margin-bottom: 40px;
width: 80%;
margin-left: 10%;
float: left;
clear: both;
/* stop using margin auto it does not work with float */
/* float is needed to make your website mobile friendly with percentages */
}

.menubox {
font-size: 2.5vw;
margin-left: 8%;
margin-top: 6.5px;
margin-right: 6%;
margin-bottom: 6.5px;
float: left;
/*width: 20%;*/
border-radius: 7px;
/* I got the border-radius command from w3schools.com */
background-color: #172aa6;
color: #f0f0f0;
}

.headerofmenus { 
width: 90%;
border-radius: 7px;
margin-left: 5%;
background-color: lightpink;
margin-top: 10px;
font-size: 5vw;
float: left;
clear: both;
text-align: center;
 }

/* trick a div to think it belongs to two classes */
.altcolor {
   background-color:  #f2ccff;    
}

.writing {
width: 50%;
font-size: 1.4vw;
margin-top: 30px;
margin-left: 25%;
margin-right: 25%;
float: left;
clear: both;
text-align: center;
border-radius: 7px;
background-color: #f2ccff;
}

/* this is from canvas, I just added a top margin */
img {
float:left;
width:50%;
margin-top: 30px;
margin-right:25%;
margin-left:25%;
}