Flex box

HTML

<body>

        <header>
            <ul class="menu">
                <li><a href="">Option 1</a></li>
                <li><a href="">Option 2</a></li>
                <li><a href="">Option 3</a></li>
                <li><a href="">Option 4</a></li>
                <li><a href="">Option 5</a></li>
                <li class="active"><a href="">Option 1</a></li>
                <li><a href="">Option 1</a></li>
                <li id="home"><a href="index.html">Home</a></li>
            </ul>
        </header>

        <div class="wrapper">
            <section class="content">
                <h1>HELLO THIS IS THE TITLE</h1><br><br><br><br>
                <p>hello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello...

CSS

html {display: flex; flex-direction: column;} /* IE fix */
body {
    display: flex; /* crée un contexte flex pour ses enfants */
    flex-direction: column; /* affichage vertical */
    min-height: 100vh; /* toute la hauteur du viewport (compatible IE9+) */
    font-family:cursive,sans-serif,serif;
}
.wrapper {
    display: block; /* IE fix */
    flex: 1 1 auto; /* occupe la hauteur restante */
    display: flex; /* crée un contexte flex pour ses enfants */
    flex-direction:row; /* affichage horizontal */
}
.content {
    display: flex; /* IE fix */
    flex: 1; /* occupe la largeur restante */
}

aside{
    position: fixed;
    border-radius: 50%;
    height:70px;
    width: 70px;
    top:50%;
    background-color:#fff;
    border:2px solid #cecece;
}
.left {
    left: 10%;
}
.right{
    right: 10%;
}
.arrow_left{
    display:block;
    position:relative;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right:25px solid #cecece;
    top:20%;
    left:25%;
}

.arrow_right{
    display:block;
    position:relative;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left:25px solid #cecece;
    top:20%;
    left:40%;
}
aside:hover{
    border-color: #ff5722;
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.80);
}

.left:hover .arrow_left{
    border-right-color:#ff5722;
}
.right:hover .arrow_right{
    border-left-color:#ff5722;
}

/* Decoration */
body {
	background: #eeeeee;
	font-size: 1.1em;
}

footer {
    height: 40px;
    width: 100%;
    text-align: center;
    background-color:#303030;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.99);
    color:white;
}

section {
    margin: 45px 20% 0px 20%;
    background-color:#ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.40);
    overflow:hidden;
}


ul.menu {
    position:fixed;
    display:flex;
    top:0;
    font-size:100%;
    width:100%;
    box-shadow: 0px...