Float Property does not work after applied to the html file?

I am trying to make the navigation menu a left vertical menu. But instead of becoming a vertical menu, it look like this: https://i.stack.imgur.com/7J4tS.png[1]. The selector is linked to the right id and tag in the HTML file.

Below I have attached the css file. What may the potential issue that cause the float property no working properly on my page.

CSS File:

* {

    margin:0;
}

body {

    text-align: center;
    background-color: #f4e1d2;  /*change the the background color of the entire page*/
    font-family: papyrus, copperplate, serif;
}
#nav {   /*navigation menu*/

    background-color: #f18973;
    height: 80px;
    /*display:flex;
    align-items: center;*/

}
header {
    padding: 2.5%; 
    text-align: center;
    background-color:#bc5a45;
}

h1 {

    margin-bottom: 3%;
    margin-top: 5%;
    color: #bc5a45;
    font-size: calc(2px + 2vw);
}

h2 {

    margin-top: 3%;
    margin-bottom: 1%;
    color: #bc5a45;
    font-size: calc(5px + 1vw);
    
}

h3 {

    color: #bc5a45; 
    font-size: calc(1px + 1vw);
}

#nav li {
   
    padding-left: 25px;
    
    color: white;
   
}


ul { 
    
    font-size: calc(1px + 1vw);
    
   
}
ol {

    width: 15%;
    margin: auto;
    color: #f18973
}

p {

   color: #f18973; 
   width: 60%;
   margin: auto;
   font-size: calc(1px + 1vw);

}

video { 
   
    margin: 1%;
}

img {
    margin: 1%;
}



footer {

    background-color: #b2b2b2;
    clear: both;
}

header h1 {
    color: white;
    letter-spacing:5px;
    font-size:calc(10px + 2vw);
    margin-bottom: 10px;
}

header p {

    margin-top: 10px;
    color:white;
    
    
}

a:link {

    color: white;
}

#page-wrapper {  /*wrap the entire body tag*/

    float:left;
    width:100%;
    box-sizing:border-box;
}


#main-content { /*wrap the main content*/

    width:75%;
    float:left;
    box-sizing:border-box;
}



#nav {

  float:left;
  width: 25%;
  box-sizing: border-box;  
}

from Recent Questions - Stack Overflow https://ift.tt/2MsS907
https://ift.tt/eA8V8J