2
respuestas

Banner no ocupa el 100%

Hola! Al momento de definir el width de mi banner, pongo 100% pero no se refleja esto en el sitio.

/* Inicia CSS para HEADER*/

    header {
        background-color: #BBBBBB;
        padding: 20px 0;
    }

    .box {
        width: 940px;
        position: relative;
        margin: 0 auto;
    }

    nav {
        position: absolute;
        top: 110px;
        right: 0px;
    }

    nav li {
        display: inline;
        margin: 0 0 0 15px ;
    }

    nav a {
        text-transform: uppercase;
        color: #000000;
        font-weight: bold;
        font-size: 22px;
        text-decoration: none;
    }

    nav a:hover {
        color: #c78c19;
        text-decoration: underline;
    }

/* Termina CSS para HEADER*/

/* Inicia CSS para PRODUCT MAIN*/

    .products {
        width: 940px;
        margin: 0 auto;
        padding: 50px;
    }

    .products li {
        display: inline-block;
        text-align: center;
        width: 30%;
        vertical-align: top;
        margin: 0 1.5%;
        padding: 30px 20px;
        box-sizing: border-box;
        border: 2px solid black;
        border-radius: 10px;
    }

    .products li:hover {
        border-color: #c78c19;
    }

    .products li:active {
        border-color: #420a55;
    }

    .products h2 {
        font-size: 30px;
        font-weight: bold;
    }

    .products li:hover h2 {
        font-size: 33px;
    }

    .product-description {
        font-size: 18px;
    }

    .product-price {
        font-size: 20px;
        font-weight: bold;
        margin-top: 10px;
    }

/* Termina CSS para PRODUCT MAIN*/  

/* Inicia CSS para FOOTER*/

    footer {
        text-align: center;
        background: url(imagenes/bg.jpg);
        padding: 40px;
    }

    .copyright {
        color: #FFFFFF;
        font-size: 13px;
        margin: 20px;
    }

/* Termina CSS para FOOTER*/

/* MAIN COMPARTIDO*/

    main {
        width: 940px;
        margin: 0 auto;
    }

/* MAIN COMPARTIDO*/

/* Inicia CSS para CONTACT MAIN*/

    form {
        margin: 40px 0;
    }

    form label, form legend {
        display: block;
        font-size: 20px;
        margin: 0 0 10px;
    }

    .input-padron, textarea {
        display: block;
        margin: 0 0 20px;
        padding: 10px 25px;
        width: 50%;
    }

    .checkbox {
        margin: 20px 0 ;
    }

    .enviar {
        width: 40%;
        padding: 15px 0;
        font-size: 18px;
        font-weight: bold;
        color: white;
        background: orange;
        border: none;
        border-radius: 5px;
        transition: 0.5s all;
        cursor: pointer;
    }

    .enviar:hover {
        background: red;
        transform: scale(1.1);
    }

    table {
        margin: 40px 40px;
    }

    thead {
        background-color: #555555;
        color: white;
        font-weight: bold;
    }

    td, th {
        border: 1px solid black;
        padding: 8px 15px;
    }

/* Termina CSS para CONTACT MAIN*/

/* Inicia CSS para HOME*/

    .banner {
        width: 100%;
    }

    .titulo-principal {
        text-align: center;
        font-size: 2em;
        margin: 0 0 1em;
    }

    .principal p {
        margin: 0 0 1em;
    }

    .principal strong {
        font-weight: bold;
    }

    .principal em {
        font-style: italic;
    }

    .imagenDiferenciales {
        width: 60%;
    }


/* Termina CSS para HOME*/
2 respuestas

Ya verificaste que este bien escrito en tu codigo de HTML y CSS?

¿lo solucionaste? yo igual tengo ese problema.