body {
    background-color: aqua;
}

body {
    margin: 0;
}
/*part of the header style*/
#header {
    background-color: teal;
    padding: :20px;
    /*text-align: center;
     * this should not be used unless needed because it centers all the texts to the center maybe if i can remove the bullet points but then i need the reference point*/
}

/* the top of the navigation bar*/
.topnav{
overflow:hidden;
background-color: #333;
}

/*the links */
.topnav a{
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* color change on the hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}