Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Sitio Web</title>
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="css/fontello.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<header>
    <img src="imagenes/Logotipo.png" class="img-logo">
    <input type="checkbox" id="check">
    <label for="check" class="icon-menu"></label>

    <nav class="menu">
        <ul>
            <li><a href="#" style="background: #df6666; color: white;">Inicio</a></li>
            <li><a href="#">Acerca de</a></li>
            <li><a href="#">Servicios</a></li>
            <li><a href="#">trabajos</a></li>
        </ul>
    </nav>
</header>
<main>
    <div class="content-one">
        <div class="content-portada">
            <div class="content-text">
                <h4>It Doesn´t Take a Rocket <h3>Scientist</h3> </h4>
                <h2>IT TAKES A DESIGNER</h2>
            </div>
        </div>
    </div>
    <div class="content-two">
        <div class="content-details">
            <div class="content-item2">
            <label class="icon-heart"></label>
            <h4>Desing</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
            </div>
            <div class="content-item2">
            <label class="icon-laptop"></label>
            <h4>Bootstrap</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
            </div>
            <div class="content-item2">
            <label class="icon-support"></label>
            <h4>Support</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit dolor, dictum id lacus in, pulvinar condimentum massa. Nunc dapibus, nunc sed suscipit fringilla, eros tortor bibendum risus, sed malesuada.</p>
            </div>
        </div>
    </div>
    <div class="content-three">
        <div class="content-module">
            <h3>LATEST WORKS</h3>
            <img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
            <img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
            <img class="img1" src="imagenes/dispositivo%20movil%20iphone%20png.png">
        </div>
    </div>
</main>
</body>
</html>


El codigo css del menu es este:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial;
}

.c{
    background: #f2f2f2;
}

header{
    width: 98%;
    height: 60px;
    background: #1e1e1e;
    position: fixed;
    z-index: 1;
    margin-left: 1%;
    margin-right: 1%;
}

.img-logo{
    width: 60px;
    margin-left: 10%;
    padding: 10px;
}

.img-logo:hover{
    cursor: pointer;
}

#check{
    display:none;
}


.icon-menu{
    display:none;
}

.menu{
    width: auto;
    float: right;
    margin-top: 19px;
    margin-right: 7%;
}

.menu ul{
    display: flex;
}

.menu ul li{
    list-style: none;
}

.menu ul li a{
    padding: 10px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    color: #b7b7b7;
}

.menu li a:hover{
    color: white;
}

@media screen and (max-width:900px){
    .icon-menu{
        display: block;
        color:white;
        float: right;
        padding: 5px;
        font-size: 24px;
        border: 1px solid #7a7a7a;
        border-radius: 5px;
        margin-top: 10px;
        margin-right: 16px;
    }

    .menu{
        float: left;
        margin-top: -4px;
        width: 100%;
        background: #1e1e1e;
        height: 0px;
        overflow: hidden;/*con este solo se mostrara lo que tenga en altura*/
        transition: all 300ms;
    }

    .icon-menu:hover{
        background: #3f3f3f;
        cursor: pointer;
    }

    .menu ul{
        flex-direction: column;
    }

    .menu li a{
        display: block;
    }

    #check:checked ~ .menu{
    height: 174px;
}

ESTE ES EL CODIGO CSS DE TODO MI CONTENIDO

main{
    position: relative;
    top: 60px;
}

.content-one{
    width: 98%;
    margin: auto;
}

.content-portada{
    width: 100%;
    height: 319px;
    background-image: url(../imagenes/notebook.jpg);
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
}

@media screen and (max-width:480px){
    .content-portada{
        background-size: 480px;
    }
}

.content-text{
    width: 400px;
    margin: auto;
    text-align: center;
    position: relative;
    top: 60px;
}

.content-text h4{
    color:white;
    font-size: 40px;
    font-weight: 100;
}

.content-text h2{
    color: white;
    font-size: 36px;
    font-weight: 100;
}

.content-text h3{
    color:white;
    font-size: 40px;
    font-weight: bold;
}

@media screen and (max-width:480px){
    .content-text{
        width: 90%;
    }
}

/*CONTENT TWO*/

.content-two{
    width: 100%;
    padding: 40px 0px;
    background: #f2f2f2;
}

.content-details{
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.content-item2{
    width: 220px;
    text-align: center;
    margin: 10px 20px;
}

.icon-heart, .icon-laptop, .icon-support{
    color:#e47171;
    font-size: 30px;
}

/*CONTENT THREE*/

.content.three{
    width: 100%;
    background: #f7f7f7;
}

.content-module{
    width: 80%;
    margin: auto;
    text-align: center;
    padding: 0px 40px;
}

.content-module h3{

}

.content-module img{
    margin-top: 40px;
    margin: 20px;
    transition: all 300ms;
}

.content-module img:hover{
    transform: rotate(-10deg);
    transition: all 300ms;
    cursor: pointer;
}