div { 
float: left; 
}


#container { 
background-color: #78282B; 
width: 	90%;  
margin-left: auto;
margin-right: auto;
padding: 30px; 
/* stop using margin auto, does not work with float*/ 

/* float is needed to make your website mobile friendly with percentages*/
} 

.sidebarofmenus {
width : 15%;     
margin-left: 2%; 
margin-right: auto;
background-color: #E6F2D8; 
clear: all; 
height: 53%; 
float: both;
} 

.contentholder { 
background-color: #E4F3DB;   
padding: 10px;
width: 50%;  
margin-left: 7%;  
margin-right: auto;    
margin-bottom:4%;
 


}


.menubox { 
background-color: #2E0F10 ; 
/* some color idk */
background-color: #81302B;
color: #FAF1F2; 
border-radius: 5%; 
margin-top: 5%; 
margin-bottom: 6%;
margin-left: 2%;
margin-right: 2%;
padding-top: 18px;
padding-right: 2%;
padding-left: 8%;
width: 80%;
height: 45px;
}  


p { 
font-family: Georgia, serif;
font-size: 18px;
text-align: center;
}

img {

width: 50%; 
margin-left: 25%;
margin-left: 25%;
}  

h1 { 
text-align: center;
}




/*

google w3c height percent 

selectors in html have no dot

selectors in css have a dot


*/