div {
float: left;
clear: both;
}


#container {
background-color: #F2EBE3;
margin-bottom: 45px;
/*width: 80%;*/
margin-left: 10%;
/*stop using auto margin it doesnt work with the float function!*/
/*float is needed to make your website mobile friendly with percentages*/
}


.content {
background-color: teal;
clear: none;
/*if you add padding must reduce width*/
font-size: 3.5em;
font: sans-serif;
color: F2EBE3;
padding: 1%;
width: 69%;
margin-left: 5%;
margin-bottom: 15px;
margin-top: 10px;
border-radius: 20px 20px 20px 20px;
}

.shopcontent {
background-color: teal;
clear: none;
/*if you add padding must reduce width*/
font-size: 3.5em;
padding: 1%;
color: F2EBE3;
width: 69%;
margin-left: 5%;
margin-bottom: 15px;
margin-top: 10px;
border-radius: 20px 20px 20px 20px;
}


.infocontent {
background-color: teal;
clear: none;
/*if you add padding must reduce width*/
font-size: 3.5em;
padding: 10px;
color: F2EBE3;
width: 70%;
margin-left: 5%;
margin-bottom: 15px;
margin-top: 10px;
border-radius: 20px 20px 20px 20px;



}


.infocontent {
background-color: teal;
clear: none;
/*if you add padding must reduce width*/
font-size: 3.5em;
padding: 10px;
color: F2EBE3;
width: 70%;
margin-left: 5%;
margin-bottom: 15px;
margin-top: 10px;
border-radius: 20px 20px 20px 20px;

}

.sidebarofmenus {
width: 20%;
border-radius: 20px 20px 20px 20px;
margin: 30px;
background-color: bonewhite;
clear: none;
}


.menubox {
background-color: teal;
font-size: 24pt;
border-radius: 30px 30px 30px 30px;
text-align: center;
height: 100px;

padding: 1%;
padding-top: 80px;
width: 95%;
margin-left: 1.5%;


margin-top: 30px;
clear: both;

}