Replicating the norwegian flag using CSS so here I am trying to get some reviews from my code, where I have to replicate the norwegian flag using flexbox.
First to be sayed is that my teachers told me to divide the flag in two sections, where I have had to insert two of the four squares in eachone, but I ignored this since with declarations like align-content: space-between; I could send the four squares right to the corners and play with margins to adjust them, that's why I just created 4 containers (white squares) with its respective item (red squares).
Before I show my code, I want to tell that it was so diffuicult to me to deal with the size of the elements, first a try to use flex-basis: ; and flex-grow: ; to automatically give size to the squares, but this does'nt work for me, so I have to use width: ; and height: ;.
Due to all this I want to get reccomendations to improve my code or best alternatives to reach the objective and then a kind of explanation about the size of elements.
Here's the code:


body{
    background-color: #00205B;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
.white-square1, .white-square2, .white-square3, .white-square4{
    background-color: #ffffff;
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    align-items: flex-start;
}
.white-square1, .white-square3{
    margin: 0 50px 50px 0;
    height: 43.8vh;
    width: 25vw;
    flex-grow: 1;
}
.white-square2, .white-square4{
    margin: 0 0 50px 50px;
    height: 43.8vh;
    width: 50vw;    
    flex-grow: 2;
}
.white-square3{
    margin: 50px 50px 0 0; 
    align-items: flex-end;
}
.white-square4{
    margin: 50px 0 0 50px;
    align-items: flex-end;
}
.red-square1, .red-square2, .red-square3, .red-square4{
    background-color: #BA0C2F;
}
.red-square1, .red-square3{
    margin: 0 50px 50px 0;
    height: 37.8vh;
    width: 25vw;
    flex-grow: 1;
    margin-left: 0;
}
.red-square2, .red-square4{
    margin: 0 0 50px 50px;
    height: 37.8vh;
    width: 50vw;
    flex-grow: 2;
    margin-right: 0;
}
.red-square3{
    margin: 50px 50px 0 0; 
    align-items: flex-end;
}
.red-square4{
    margin: 50px 0 0 50px;
    align-items: flex-end;
}
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;title&gt;Flexbox Actividad 3&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;section class="white-square1"&gt;
        &lt;div class="red-square1"&gt;&lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="white-square2"&gt;
        &lt;div class="red-square2"&gt;&lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="white-square3"&gt;
        &lt;div class="red-square3"&gt;&lt;/div&gt;
    &lt;/section&gt;
    &lt;section class="white-square4"&gt;
        &lt;div class="red-square4"&gt;&lt;/div&gt;
    &lt;/section&gt;
&lt;/body&gt;
&lt;/html&gt;
Quick implementation idea
Create a container div with two divs inside. Position those divs as a cross lust like in the Norwegian flag. After that give those divs a thick white border and the flag's red color would be simply the container div's background-color.
Code review

Sections are not an appropriate HTML element in this case. Use div's instead.
Do not style using html tags like body. Use CSS classes instead. Read about the css specificity
.red-square2, .red-square4{ this selector has both margin and margin-righ properties at once. margin: a b c d should be enough.
Tidy up your CSS. In one line You style .red-square3 and some lines below You style the same element. Why? Can't you use one CSS rule for that? :)

Improvement ideas

Move the CSS color to variables and place them in a separate file.