div {
    float: left;
    clear: both;
}


#container {
    background-color: aquamarine;
    height: 2000px;
    margin-bottom: 50px;
    width: 80%;
    margin-left: 10%;
    /* do not use margin auto
       this makes website mobile and I assume screen size friendly
    */

}

.sidebarofmenus {
    margin-top: 10px;
    width: 8%;
    margin-left: 2%;
    background-color: crimson;
    height: 300px;
    clear:none;
}

.menu1 {
    margin-top: 13px;
    width: 90%;
    margin-left: 5%;
    background-color: indianred;
    height: 20%;
    clear: none;
}

.menu2 {
    margin-top: 12px;
    width: 90%;
    margin-left: 5%;
    background-color: indianred;
    height: 20%;
    clear: none;
}

.menu3 {
    margin-top: 12px;
    width: 90%;
    margin-left: 5%;
    background-color: indianred;
    height: 20%;
    clear: none;
}

.menu4 {
    margin-top: 12px;
    width: 90%;
    margin-left: 5%;
    background-color: indianred;
    height: 20%;
    clear: none;
}

.textholder {
    background-color: sandybrown;

    /* I have to reduce the width if I use padding, cannot exceed 100%*/
    width: 60%;
    margin-left: 5%;
    height: 300px;
    margin-top: 10px;
    clear: none;
    text-indent:each-line;
}