html and css responsive design not resizing the divs the way I want

Question

I am making a website that uses HTML and CSS only. My website currently looks like this. Ignore the broken texts as they are not my problem.

The header and the navigation bar (the blocks of colours arranged vertically) are fixed positions and the div at the furthest right which I named .content is scrollable.

The problem is that whenever I try to resize my website so that it gets smaller, the divs go out of place, not the way I want it to. It looks like this after resized. Avoid the broken words, they aren't the problem. The problem is the navigation bar (which I named .nav) not sticking to the header div (which I named .header).

This is my HTML code:

/* entire website */

    body
    {
	    background: #E3AB42;
	    margin-top: 0px; 
	    margin-left: 0px;
    }

    /* box sizing */
    * {
       box-sizing: border-box;
    }

    /* all about the header */

    .header {
	    background-color: #060606; /*666!!!!*/
	    height: 100%;
	    position: fixed;
    }

    .header img {
	    margin-left: 25px;
	    margin-top: 20px;
    }

    .header p {
	    transform: rotate(270deg);
	    color: white;
	    font-family:  Optima, "Times New Roman", Georgia, Serif;
    }

    .header .title {
	    margin-top: 220px;
	    margin-left: -150px;
	    display: inline-block;
	    font-size: 88px;
    }

    .header .subtext {
	    display: inline-block;
	    text-align: right;
	    margin-top: -300px;
	    margin-right: -55px;
	    font-size: 33px;
	    white-space: nowrap;
    }

    /* navigation general codes */

    .nav {
	    position: fixed;
	    height: 100%;
	    margin-left: 225px;
    }

    .nav div {
	    height: 20%;
	    padding: 0;
    }

    .nav p {
	    color: white;
	    font-family:  Optima, "Times New Roman", Georgia, Serif;
	    font-size: 33px;
	    transform: rotate(270deg);
	    text-align: center;
	    display: inline-block;
    }

    a:link {
	    text-decoration: none;
    }

    /* navigation vertical texts 

    #verticalnewbie {
	    margin-top: 73px;
    }

    #verticalskill {
	    margin-top: 65px;
    }

    #verticalheroes {
	    margin-top: 78px;
    }

    #verticalmindset {
	    margin-top: 85px;
    }

    #verticalteam {
	    margin-top: 59px;
    }

    /* navigation button colours */

    .newbie {
    	background: #E3AB42;
    }

    .skills {
	    background: #FAA02E;
    }

    .heroes{
    	background: #B17C3B;
    }

    .mindset {
    	background: #584F4A;
    }

    .team {
    	background: #2F2526;
    }

    /* general content */

    .content { 
    	width: 70%;
    	height: auto;
    }
    
    /* .content #examplar {
    	float: right;
	    height: auto;
    	width: 25%;
    }

    /* page colours */

    body#pagenewbie {
    	background: #E3AB42;
    }

    body#pageskill {
    	background: #FAA02E;
    }

    body#pageheroes {
    	background: #B17C3B;
    }

    body#pagemindset {
    	background: #584F4A;
    }

    body#pageteams {
    	background: #2F2526;
    }

    /* content texts */

    .content h1 {
	    text-align: center;
	    color: white;
	    font-family: Optima, "Times New Roman", Georgia, Serif;
	    font-size: 66px;
    }

    .content li {
	    color: white;
	    font-family: Optima, "Times New Roman", Georgia, Serif;
	    font-size: 33px;
	    font-weight: bold;
	    list-style-type: none;
    }

    .content p {
    	list-style-type: none;
	    text-decoration: none;
	    color: white;
	    font-family:  Optima, "Times New Roman", Georgia, Serif;
	    font-size: 22px;
    }

    /* hover */

    #dropdown:hover span {
	    display: block;
        font-size: 13px;
        height: auto;
        width: 200px;
        color: white;
        letter-spacing: 1px;
        text-align: left;
        padding: 5px 20px;
	    position: absolute;
	    margin-top: -40px;
	    margin-left: 880px;
    	font-family:  Optima, "Times New Roman", Georgia, Serif;
    }

    body#pagenewbie #dropdown:hover span {
        background: #E6B355;
        border: 5px solid #C19138;
    }

    body#pageskill #dropdown:hover span {
	    background: #FAAA43;
	    border: 5px solid #D48827;
    }

    body#pageheroes #dropdown:hover span {
	    background: #B9894F;
	    border: 5px solid #966932;
    }

    body#pagemindset #dropdown:hover span {
	    background: #69615C;
	    border: 5px solid #4B433F;
    }

    body#pageteams #dropdown:hover span {
    	background: #443B3C;
    	border: 5px solid #281F20;
    }

    #dropdown {
	    color: #E6E6E6;
    }

    #infoone {
	    display: none;
    }

    /* grid boxes */

    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
    
    [class*="col-"] {
        float: right;
    }

<!DOCTYPE html>
    <html>
	    <head>
		    <title>Overtips</title>
		    <link rel="stylesheet" type="text/css" href="theme.css" />
		    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    </head>
	
	    <body id="pagenewbie">
		
		    <div class="row">
  			    <div class="col-1"></div>
  			    <div class="col-2"></div>
  			    <div class="col-3"></div> <!-- 25% -->
  			    <div class="col-4"></div>
  			    <div class="col-5"></div>
  			    <div class="col-6"></div>
  			    <div class="col-7"></div>
  			    <div class="col-8"></div>
  			    <div class="col-9"></div> <!-- 75% -->
  			    <div class="col-10"></div>
  			    <div class="col-11"></div>
  			    <div class="col-12"></div>
	    </div>

		<div class="container">
		
			<div class="col-2 header">
				<div class="logo"><img src="overlogo.png"></div>
				<div class="title"><p>OVERTIPS</p></div>
				<div class="subtext"><p>Mainly for beginner and<br>intermediate players</p></div>
			</div>
			
			
			<div class="col-1 nav">
			
				<a href="file:///Users/marvin.chong021/Desktop/Website/index.html"><div class="newbie"><p id="verticalnewbie">NOVICE</p></div></a> 
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overskill.html"> <div class="skills"><p id="verticalskill">SKILLS</p></div></a>
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overheroes.html"> <div class="heroes"><p id="verticalheroes">HEROES</p></div></a>
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overmindset.html"> <div class="mindset"><p id="verticalmindset">MINDSET</p></div></a> 
				
				<a href="file:///Users/marvin.chong021/Desktop/Website/overteams.html"> <div class="team"><p id="verticalteam">TEAM</p></div></a>
				
			</div>
			
			<div class="col-9 content">
			
				<h1>Novice Section</h1>
				<li>In-game settings</li>
				<p>Firstly, in <a id="dropdown">game settings<span id="infoone">It is a menu with options to change.</span></a>. Like any other game, you want to check your in game setting before playing the game. Everyone is different and different people prefer different settings. You may need to experiment with your heroes (characters you can play) and play around a little and see what you need to change. Assuming you know what you need to change, you can go to options menu by pressing escape or going to game menu screen and change the setting you want. </p>
			</div>
		</div>
	</body>
</html>

I suspect it has something to do with the [class*="col-"] { float: right; } I tried changing it to left, other than the .content moving to the left, the problem still remain.

Answer 1

Move your style for grid boxes to just after body. like this

body
{
    background: #E3AB42;
    margin-top: 0px;
    margin-left: 0px;
}

/* grid boxes */

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: right;
}

then put fixed width to your header:

.header {
    background-color: #060606;
    height: 100%;
    width:225px;
    position: fixed;
}

If you dont move the grid boxes style before the header style then they kind of override this one. so dont forget the first step.

Answer 2

The problem is that you have set your .nav element as fixed with a margin-left: 225px;, but in the second image the .header is obviously smaller!

You should, at least, set

.header {
   width: 225px;
}

otherwise you should adapt the .nav margin-left to match the width of the .header