I want to make the background that is on the sides of my menu have a color # f2f2f2

Navigation
0

I can not make the color of my menu on the sides be #f2f2f2 , it is still white and I do not know what value to modify. Try to make a div to the whole menu and modify it but it does not work is the same, I just want to modify the color of the right and left edge. 

<!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>

The css code of the menu is this: 

*{
    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;
}

This is the css code of all my content 

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;
}
    
asked by Michael Steeven Vanegas Salaza 19.06.2018 в 00:54
source

2 answers

0

To change the background color to the header: 

header {
    background-color: #f2f2f2 !important;
}

To define the color of the edges on the sides of the menu. 

.menu {
border-right: #f2f2f2 1px solid !important;
border-left: #f2f2f2 1px solid !important;
}
    
answered by 19.06.2018 / 15:14
source
0

You only have to modify the css of your header. Remove the margins and change the width to 100% like this: 

*{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: arial;
    }
    
    .c{
        background: #f2f2f2;
    }
    
    header{
        width: 100%;
        height: 60px;
        background: #1e1e1e;
        position: fixed;
        z-index: 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;
    } 
    

    
    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;
    }
<!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>
    
answered by 19.06.2018 в 01:02
drop-list give values from the database MYSQL order query