Made a CSS hamburger menu, but it doesn't cover the the background/main

I followed a tutorial on how to make a hamburger menu in css with media queries, but when it folds out it goes transparent and I can't find out how to make the bacground cover the main content.

Does anyone know how to fix this or see what I'm doing wrong? Very thankful for any help!

Here is my html:

<div class="nav">
                <label for="toggle">&#9776;</label>
                <input type="checkbox" id="toggle"/>
                <div class="menu">
                    <a href="#">one</a>
                    <a href="#">two</a>
                    <a href="#">three</a>
                    <a href="#">four</a>
                    <a href="#"><span>five</span></a>
                </div>
            </div>

And here is my CSS:

.nav{

    border-bottom: 1px solid #EAEAEB;
    text-align: right;
    height: 70px;
    line-height: 70px;
    background-color: #000;/*black nav bg*/

}

.menu {
    margin: 0 30px 0 0;



}

.menu a {
    clear:right;
    text-decoration: none;
    color:#aaaaaa;
    margin: 0 10px;
    line-height: 70px;
    background-color: #000;/*black nav dropdown*/

}

span{
    color: #54d17a;
}

label{
    margin:0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display:none;
    width: 26px;
    float:right;
    color: #fff;



}

#toggle{
    display: none;

}


@media only screen and (max-width: 550px){

    label{
        display: block;
        cursor: pointer;
    }

    .menu{
        text-align: center;
        width: 100%;
        display:none;
    }

    .menu a{
        display:block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0; 

    }

    #toggle:checked + .menu{
    display:block;
    }