When my navigation bar is displayed on a small screen (mobile example), it doesn't appear as expected, I cannot fix the problem

I tried to change my `css` several times but it gets worse

Can u help me please :)

[navbar responsive test](https://codepen.io/Chrisfrade/pen/NmgEbv)

```css
@media( max-width: 1200px){
    header{
        /*margin: 20px;*/

    }
}
@media( max-width: 768px){
    .menu-toggle{
        display: block;
        width: 40px;
        height: 40px;
        margin: 10px;      
        float: right;
        cursor: pointer;
        text-align: center;
        font-size: 30px;
        color: #069370;
    }
    .menu-toggle:before{
        content: '\f0c9';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    .menu-toggle.active:before{
        content: '\f00d';
        font-family:  FontAwesome;
        line-height: 40px;
    }
    nav {
        display: none;
    }
    nav.active {
        display: block;
        width: 100%;
    }
    nav.active ul {
        display: block;

    }
    nav.active ul li a {
        margin: 0;

    }
}
```