nav article and aside widths sum is 100% but the aside goes to new line

Question

I have a HTML page where there are: header, nav, article and aside. I want the header on the top as a bar and the nav, article and aside as 3 cols. When i wrote the css I put margins and widths of nav, article and aside which sum is 100% but aside on full screen is as a third col but when i resize the screen goes to new line. I read that the problem are the whitespaces and i tried to remove them but it doesn't work. I put body to flex and it worked but it did a single row with 4 cols (header, nav, article and aside). At this point i tried with a div as a container of nav, article and aside and put it to display:flex but it doesn't work. I don't what to do anymore.

Here the code HTML & CSS

nav {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 0;
    width: 20%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 15px;
}

article {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 52.5%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 5px;
}

aside {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 20%;
    background-color: #f1f1f1;
    float: right;
    overflow: auto;
    border-radius: 5px;
}

<nav>
            <a class="active" href="index.html">Homepage</a>
        </nav>
        <article>
            <h1>Hai bisogno di ripetizioni?</h1>
            <h2>Controlla subito le disponibilit&agrave; qui sotto:</h2>
            <div id="listAvailable"></div>
        </article>
        <aside>
            Filtra le disponibili&agrave;:<br>
            Data<br>
            <div class="filter" id="days"></div>
            Materia<br>
            <div class="filter" id="subjects"></div>
            <button onclick="filterAvailable()">Filtra</button>
        </aside>

EDIT: The answer below is the right solution, if it doesn't work immediately try to delete cache and history because it was the reason why it didn't worked when i tried before to make the post. Anyway i had to add height: 100%; in aside and nav to make them wrap their content, otherwise their height would match the height of the div.flex (that is quite annoying).

EDIT2: There were other css code that make the site responsive, with this solution it doesn't work. The full css code is:

body {
    background-image: url(../img/bg.gif);
    margin: 0;
    padding: 0;
}

header {
    margin-bottom: 15px;
    padding: 20px 10px;
    background-image: url(../img/header2.gif);
    overflow: hidden;
}

nav {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 0;
    width: 20%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 15px;
    height: 100%;
}

article {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 52.5%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 5px;
}

aside {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 20%;
    background-color: #f1f1f1;
    float: right;
    overflow: auto;
    border-radius: 5px;
    height: 100%;
}

.flex{
    display:flex;
}

header img.logo {
  font-size: 25px;
  font-weight: bold;
}

#formLogin {
  float: right;
}

nav a {
    display: block;
    color: black;
    padding: 16px;
    text-decoration: none;
    text-align: center;
}

nav a.active {
    background-color: #00bff0;
    color: white;
}

nav a:hover:not(.active) {
    background-color: #555;
    color: white;
}

/* Add media queries for responsiveness*/
@media screen and (max-width: 700px) {
    article { 
        margin-top: 20px;
        min-width: 550px;
    }
    nav {
        align-items: center;
        width: 100%;
        height: auto;
        position: relative;
    }
    nav a{
        text-align: center;
        height: auto;
        float: left;
    } 
    
}

@media screen and (max-width: 500px) {
    header {
        align-items: center;
    }
    
    #formLogin {
        float: none;
    }
}

@media screen and (max-width: 400px) {
    nav a {
        text-align: center;
        float: none;
    }
} 

To make the css still responsive you have to add this CSS code in the largest @media (the smaller ones will inherit it):

.flex {
        display: block;
    }

I hope this edit can helps someone in the future

Answer 1

if this is not answer, please show what you want to with picture.

nav {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 0;
    width: 20%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 15px;
}

article {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 52.5%;
    background-color: #f1f1f1;
    float: left;
    overflow: auto;
    border-radius: 5px;
}

aside {
    margin-left: 0.5%;
    margin-right: 0.5%;
    padding: 15px;
    width: 20%;
    background-color: #f1f1f1;
    float: right;
    overflow: auto;
    border-radius: 5px;
}

.flex{
  display:flex;
}

<div class="flex">
<nav>
            <a class="active" href="index.html">Homepage</a>
        </nav>
        <article>
            <h1>Hai bisogno di ripetizioni?</h1>
            <h2>Controlla subito le disponibilit&agrave; qui sotto:</h2>
            <div id="listAvailable"></div>
        </article>
        <aside>
            Filtra le disponibili&agrave;:<br>
            Data<br>
            <div class="filter" id="days"></div>
            Materia<br>
            <div class="filter" id="subjects"></div>
            <button onclick="filterAvailable()">Filtra</button>
        </aside>
  </div>