Remove white side space from HTML with Bootstrap

1

There is a white border that I can not remove and I do not know why it is formed. It only appears in the mobile responsive version.

   /*/*Fuentes*/
    @import 'https://fonts.googleapis.com/css?family=Lora:700i'; /*Header*/
    @import 'https://fonts.googleapis.com/css?family=Merriweather'; /*Títulos*/
    @import 'https://fonts.googleapis.com/css?family=Open+Sans:300'; /*Subtítulos*/
    
    
    body{
        padding-top: 70px;
    }
    
    footer{
        background-color: #B7254E;
        color: white;
    }
    
    /*Los botones dentro de una font: ;ma*/
    form > button{
        width: 50%;
        background-color: #5A1741 !important;
        text-align: left !important;
    }
    
    /*ids*/
    
    
    #copyrights{
        padding-top: 25px;
    }
    
    #futer{
        padding-top: 25px;
        padding-bottom: 25px;
    }
    
    #textfield{
        height: 150px;
    }
    
    #proyectos{
        background-color: #5A1741;
        color: white;
    }
    
    #id-quienes{
        color: white;
        background-color: #5A1741;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    #imagen-fondo{
        position: relative;;
        z-index: -1;
    }
    
    #logo{
        width: 13em;
    }
    
    #contacto-desc{
        color: #692C52;
        font-weight: bold;
    }
    
    #pasion-div{
        background-image: url("media/portada-mejor.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    
        min-height: 650px;
        padding: 13px;
    
        font-size: 1.2em;
    
        /*Para que se centre el texto*/
        display: table;
        width: 100%;
    }
    
    #pasion-div > div{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    
    #pasion-texto{
        font-family: 'Lora', serif;
        color: white;
        font-size: 3em;
        /*width: 400px;*/
    }
    
    #quienes{
        background-color: #5A1741;
        height: 200px;
    }
    
    /*clases*/
    
    .ch{
        font-weight: bold;
        color: #5A1741;
    }
    
    .cs{
        color: #5A1741;
        color: #B7254E;
    }
    
    .navbar-nav{
        background-color: white;
        font-weight: bold;
    }
    
    .navbar-nav {
        display:table;
        width:100%;
        margin: 0;
        color: #B7254E;
    }
    .navbar-nav > li {
        float:none;
        display:table-cell;
        text-align:center;
        
    }
    
    .navbar a{
        color: #B7254E !important;
    }
    
    .barraRosa-nav{
        width: 100%;
        height: 45px;
        background-color: #B7254E;
    }
    
    .barraRosa{
        width: 100%;
        height: 5px;
        background-color: #B7254E;
    }
    
    .barraRosa-negra{
        width: 100%;
        height: 5px;
        background-color: #5A1741
    }
    
    .hacemos-descripciones{
        color: #B7254E;
    }
    
    .hacemos-headers{
        color: #5A1741;
    }
    
    .fuente-merri{
        font-family: 'Merriweather', serif;
    }
    
    .fuente-sans{
        font-family: 'Open Sans', sans-serif;
    }
    
    /*Posicionar verticalmente en el centro*/   
    .vertical-align {
        vertical-align: middle;
        display: inline-block;
    }
    
    .form-group > input{
        width: 50%;
    }
    <!DOCTYPE html>
    <html lang="es">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1">
        <!--Boostrap jQuery-->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>
        <!--Boostrap-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
            crossorigin="anonymous">
        <!--Favicon-->
        <link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
        <!--Mi CSS-->
        <link rel="stylesheet" type="text/css" href="estilo.css">
    
        <title> TRAMA & DRAMA | Vestuario y producción</title>
    </head>
    
    <body>
        <!-- navbar -->
        <nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                        aria-controls="navbar">
                <span class="sr-only">Navegación</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">¿Quiénes somos?</a></li>
                        <li><a href="#">¿Qué hacemos?</a></li>
                        <li>
                            <a href="#"><img id="logo" src="media/logo-menu.png" alt=""></a>
                        </li>
                        <li><a href="#">Nuestros proyectos</a></li>
                        <li><a href="#">Contacto</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--fin del navbar-->
    
        <!--Barra rosa única del navbar-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa-nav"></div>
            </div>
        </div>
    
        <!--Sldeshow -->
        <div class="container-fluid">
            <div class="row ">
                <div id="pasion-div">
                    <div class="text-center">
                        <h1 id="pasion-texto">Pasión por el vestuario</h1>
                    </div>
                </div>
            </div>
        </div>
    
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa"></div>
            </div>
        </div>
    
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12" id="id-quienes">
                    <center><img class="img-responsive" id="img-vestido" src="media/vestido.png" alt="Vestido"></center>
                </div>
            </div>
        </div>
    
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa"></div>
            </div>
        </div>
    
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center fuente-sans" id="hacemos">
                    <h1>¿Qué hacemos?</h1>
                </div>
            </div>
            <br>
            <div class="row text-center fuente-merri">
                <div class="col-sm-4">
                    <img src="media/icono-renta.png" alt="">
                    <p class="hacemos-headers"><b>Renta de vestuario</b></p>
                    <!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
                </div>
                <div class="col-sm-4">
                    <img src="media/icono-coordinacion.png" alt="">
                    <p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
                </div>
                <div class="row">
                    <img src="media/icono-diseno.png" alt="">
                    <p class="hacemos-headers"><b>Diseño de vestuario</b></p>
                </div>
            </div>
            <div class="row text-center fuente-merri">
                <div class="col-sm-4">
                    <img src="media/icono-espacios.png" alt="">
                    <p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
                </div>
                <div class="col-sm-4">
                    <img src="media/icono-realizacion.png" alt="">
                    <p class="hacemos-headers"><b>Realización</b></p>
                </div>
                <div class="row">
                    <img src="media/icono-mantenimiento.png" alt="">
                    <p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
                </div>
            </div>
        </div>
    
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa"></div>
            </div>
        </div>
    
        <div id="proyectos">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center fuente-sans">
                        <h1>Nuestros proyectos</h1>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-12 text-center fuente-merri">
                        <p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
                    </div>
                </div>
                <br>
                <div class="row text-center fuente-sans">
                    <div class="col-sm-4">
                        <img src="media/circ-1.png" alt="">
                        <h4>Diseño de vestuario</h4>
                    </div>
                    <div class="col-sm-4">
                        <img src="media/circ-2.png" alt="">
                        <h4>Producción y coordinación de vestuario</h4>
                    </div>
                    <div class="col-sm-4">
                        <img src="media/circ-3.png" alt="">
                        <h4>Renta de vestuario</h4>
                    </div>
                </div>
                <br>
                <br>
                <br>
                <br>
                <div class="row text-center fuente-sans">
                    <div class="col-sm-6">
                        <img src="media/circ-4.png" alt="">
                        <h4>Servicio social</h4>
                    </div>
                    <div class="col-sm-6">
                        <img src="media/circ-5.png" alt="">
                        <h4>Actividades del mes</h4>
                    </div>
                </div>
            </div>
        </div>
    
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa"></div>
            </div>
        </div>
    
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center fuente-sans">
                    <h1>Contacto</h1>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-12 text-center fuente-merri">
                    <div id="contacto-desc">
                        <p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <form role="form">
                    <div class="form-group">
                        <input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
                    </div>
                    <div class="form-group">
                        <input type="email" name="" value="" placeholder="Correo electrónico">
                    </div>
                    <div class="form-group">
                        <input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
                    </div>
                    <button type="button" class="btn btn-primary">ENVIAR</button>
                </form>
            </div>
            <br>
            <div class="row text-center fuente-merri">
                <p class="ch">Teléfonos</p>
                <p class="cs">044 55 5601 1231</p>
                <br>
                <p class="ch">Correo eletrónico</p>
                <p class="cs">info@tramaydrama.mx</p>
                <br>
                <p class="ch">Dirección</p>
                <p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
            </div>
        </div>
        <br>
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa-negra"></div>
            </div>
        </div>
    
        <!--Footer-->
        <footer>
            <div class="container">
                <div class="row fuente-sans">
                    <div class="col-sm-12 text-center" id="futer">
                        <a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
                        <img src="media/icono-inst.png" alt="Instagram">
                        <img src="media/icono-vimeo.png" alt="vimeo">
                        <p id="copyrights">Copyright Trama & Drama 2016 &copy;. Todos los derechos reservados | Página web por <a target="_blank"
                                href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
                    </div>
                </div>
            </div>
        </footer>
    
        <!--Bootstrap jQuery-->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
    
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    
    </body>
    </html>
    
asked by dawn 10.12.2016 в 04:55
source

2 answers

0

This is because Bootstrap automatically adds margins and paddings to some elements. In this case, those that are causing a gap to the right of your page are those that affect the class .container-fluid and .row which have padding-right: 15px and margin-right: 15px .

Simply overwrite both classes in your CSS file ( .container-fluid and .row ) to remove padding-right and margin-right respectively, assigning them the value of 0.

You'll need to consider the specificity of the elements which is no more than the preference in the order in which the CSS is applied to the elements since the elements of Bootstrap have more specificity than those of your CSS file.

To be able to overwrite both classes you will have to do:

div.row{
   margin-right: 0px;
}

div.container-fluid{
   padding-right: 0px;
}

in your CSS file.

Your corrected example:

/*/*Fuentes*/
    @import 'https://fonts.googleapis.com/css?family=Lora:700i'; /*Header*/
    @import 'https://fonts.googleapis.com/css?family=Merriweather'; /*Títulos*/
    @import 'https://fonts.googleapis.com/css?family=Open+Sans:300'; /*Subtítulos*/
    
    
    body{
        padding-top: 70px;
    }
    
    footer{
        background-color: #B7254E;
        color: white;
    }
    
    /*Los botones dentro de una font: ;ma*/
    form > button{
        width: 50%;
        background-color: #5A1741 !important;
        text-align: left !important;
    }
    
    /*ids*/
    
    
    #copyrights{
        padding-top: 25px;
    }
    
    #futer{
        padding-top: 25px;
        padding-bottom: 25px;
    }
    
    #textfield{
        height: 150px;
    }
    
    #proyectos{
        background-color: #5A1741;
        color: white;
    }
    
    #id-quienes{
        color: white;
        background-color: #5A1741;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    #imagen-fondo{
        position: relative;;
        z-index: -1;
    }
    
    #logo{
        width: 13em;
    }
    
    #contacto-desc{
        color: #692C52;
        font-weight: bold;
    }
    
    #pasion-div{
        background-image: url("media/portada-mejor.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    
        min-height: 650px;
        padding: 13px;
    
        font-size: 1.2em;
    
        /*Para que se centre el texto*/
        display: table;
        width: 100%;
    }
    
    #pasion-div > div{
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    
    #pasion-texto{
        font-family: 'Lora', serif;
        color: white;
        font-size: 3em;
        /*width: 400px;*/
    }
    
    #quienes{
        background-color: #5A1741;
        height: 200px;
    }
    
    /*clases*/
    
    .ch{
        font-weight: bold;
        color: #5A1741;
    }
    
    .cs{
        color: #5A1741;
        color: #B7254E;
    }
    
    .navbar-nav{
        background-color: white;
        font-weight: bold;
    }
    
    .navbar-nav {
        display:table;
        width:100%;
        margin: 0;
        color: #B7254E;
    }
    .navbar-nav > li {
        float:none;
        display:table-cell;
        text-align:center;
        
    }
    
    .navbar a{
        color: #B7254E !important;
    }
    
    .barraRosa-nav{
        width: 100%;
        height: 45px;
        background-color: #B7254E;
    }
    
    .barraRosa{
        width: 100%;
        height: 5px;
        background-color: #B7254E;
    }
    
    .barraRosa-negra{
        width: 100%;
        height: 5px;
        background-color: #5A1741
    }
    
    .hacemos-descripciones{
        color: #B7254E;
    }
    
    .hacemos-headers{
        color: #5A1741;
    }
    
    .fuente-merri{
        font-family: 'Merriweather', serif;
    }
    
    .fuente-sans{
        font-family: 'Open Sans', sans-serif;
    }
    
    /*Posicionar verticalmente en el centro*/   
    .vertical-align {
        vertical-align: middle;
        display: inline-block;
    }
    
    .form-group > input{
        width: 50%;
    }

    div.row{
      margin-right: 0px;
    }

    div.container-fluid{
      padding-right: 0px;
    }
<!DOCTYPE html>
    <html lang="es">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="initial-scale=1">
        <!--Boostrap jQuery-->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
            crossorigin="anonymous"></script>
        <!--Boostrap-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
            crossorigin="anonymous">
        <!--Favicon-->
        <link rel="icon" type="image/png" href="media/favicon-32x32.png" sizes="32x32" />
        <!--Mi CSS-->
        <link rel="stylesheet" type="text/css" href="estilo.css">
    
        <title> TRAMA & DRAMA | Vestuario y producción</title>
    </head>
    
    <body>
        <!-- navbar -->
        <nav id="navegacion" class="navbar navbar-default navbar-fixed-top navbar-wrapper">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                        aria-controls="navbar">
                <span class="sr-only">Navegación</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="#">¿Quiénes somos?</a></li>
                        <li><a href="#">¿Qué hacemos?</a></li>
                        <li>
                            <a href="#"><img id="logo" src="media/logo-menu.png" alt=""></a>
                        </li>
                        <li><a href="#">Nuestros proyectos</a></li>
                        <li><a href="#">Contacto</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <!--fin del navbar-->
    
        <!--Barra rosa única del navbar-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa-nav"></div>
            </div>
        </div>
    
        <!--Sldeshow -->
        <div class="container-fluid">
            <div class="row ">
                <div id="pasion-div">
                    <div class="text-center">
                        <h1 id="pasion-texto">Pasión por el vestuario</h1>
                    </div>
                </div>
            </div>
        </div>
    
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa"></div>
            </div>
        </div>
    
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12" id="id-quienes">
                    <center><img class="img-responsive" id="img-vestido" src="media/vestido.png" alt="Vestido"></center>
                </div>
            </div>
        </div>
    
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa"></div>
            </div>
        </div>
    
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center fuente-sans" id="hacemos">
                    <h1>¿Qué hacemos?</h1>
                </div>
            </div>
            <br>
            <div class="row text-center fuente-merri">
                <div class="col-sm-4">
                    <img src="media/icono-renta.png" alt="">
                    <p class="hacemos-headers"><b>Renta de vestuario</b></p>
                    <!--<p class="hacemos-descripciones fuente-merri">Nosotros hacemos muchas cosas bien chodas</p>-->
                </div>
                <div class="col-sm-4">
                    <img src="media/icono-coordinacion.png" alt="">
                    <p class="hacemos-headers"><b>Coordinación de vestuario</b></p>
                </div>
                <div class="row">
                    <img src="media/icono-diseno.png" alt="">
                    <p class="hacemos-headers"><b>Diseño de vestuario</b></p>
                </div>
            </div>
            <div class="row text-center fuente-merri">
                <div class="col-sm-4">
                    <img src="media/icono-espacios.png" alt="">
                    <p class="hacemos-headers"><b>Renta de espacios para cursos</b></p>
                </div>
                <div class="col-sm-4">
                    <img src="media/icono-realizacion.png" alt="">
                    <p class="hacemos-headers"><b>Realización</b></p>
                </div>
                <div class="row">
                    <img src="media/icono-mantenimiento.png" alt="">
                    <p class="hacemos-headers"><b>Mantenimiento de vestuario</b></p>
                </div>
            </div>
        </div>
    
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa"></div>
            </div>
        </div>
    
        <div id="proyectos">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12 text-center fuente-sans">
                        <h1>Nuestros proyectos</h1>
                    </div>
                </div>
                <br>
                <div class="row">
                    <div class="col-sm-12 text-center fuente-merri">
                        <p>Nos interesa que conozcas más a fondo los proyectos que llevamos a cabo en <b>Trama & Drama</b>.</p>
                    </div>
                </div>
                <br>
                <div class="row text-center fuente-sans">
                    <div class="col-sm-4">
                        <img src="media/circ-1.png" alt="">
                        <h4>Diseño de vestuario</h4>
                    </div>
                    <div class="col-sm-4">
                        <img src="media/circ-2.png" alt="">
                        <h4>Producción y coordinación de vestuario</h4>
                    </div>
                    <div class="col-sm-4">
                        <img src="media/circ-3.png" alt="">
                        <h4>Renta de vestuario</h4>
                    </div>
                </div>
                <br>
                <br>
                <br>
                <br>
                <div class="row text-center fuente-sans">
                    <div class="col-sm-6">
                        <img src="media/circ-4.png" alt="">
                        <h4>Servicio social</h4>
                    </div>
                    <div class="col-sm-6">
                        <img src="media/circ-5.png" alt="">
                        <h4>Actividades del mes</h4>
                    </div>
                </div>
            </div>
        </div>
    
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa"></div>
            </div>
        </div>
    
        <div class="container">
            <div class="row">
                <div class="col-sm-12 text-center fuente-sans">
                    <h1>Contacto</h1>
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-12 text-center fuente-merri">
                    <div id="contacto-desc">
                        <p>¡Nos encantan los nuevos retos! Escríbemos, llámanos o platícanos de tu proyecto.</p>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <form role="form">
                    <div class="form-group">
                        <input type="text" name="" value="" placeholder="Tu nombre o el nombre de la empresa">
                    </div>
                    <div class="form-group">
                        <input type="email" name="" value="" placeholder="Correo electrónico">
                    </div>
                    <div class="form-group">
                        <input id="textfield" type="text" name="" value="" placeholder="Tu mensaje">
                    </div>
                    <button type="button" class="btn btn-primary">ENVIAR</button>
                </form>
            </div>
            <br>
            <div class="row text-center fuente-merri">
                <p class="ch">Teléfonos</p>
                <p class="cs">044 55 5601 1231</p>
                <br>
                <p class="ch">Correo eletrónico</p>
                <p class="cs">info@tramaydrama.mx</p>
                <br>
                <p class="ch">Dirección</p>
                <p class="cs">Eligio Villamar, No. 20, San Diego Churubusco. C.P: 04120, Delegación Coyoacan</p>
            </div>
        </div>
        <br>
        <!--Barra rosa-->
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12 barraRosa-negra"></div>
            </div>
        </div>
    
        <!--Footer-->
        <footer>
            <div class="container">
                <div class="row fuente-sans">
                    <div class="col-sm-12 text-center" id="futer">
                        <a target="_blank" href="https://www.facebook.com/tramaydrama/?fref=ts"><img src="media/icono-fb.png" alt="Facebook"></a>
                        <img src="media/icono-inst.png" alt="Instagram">
                        <img src="media/icono-vimeo.png" alt="vimeo">
                        <p id="copyrights">Copyright Trama & Drama 2016 &copy;. Todos los derechos reservados | Página web por <a target="_blank"
                                href="http://animanoir.com"><b>Animanoir/Claque</b></a> | Diseño por <b>Cúmulo</b>.</p>
                    </div>
                </div>
            </div>
        </footer>
    
        <!--Bootstrap jQuery-->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
    
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    
    </body>
    </html>
    
answered by 10.12.2016 / 09:58
source
3

Unlike what it says Error404

I suggest not to modify anything of the Bootstrap Core, what happens is that the layout is wrong. I say if we are going to use a framework the joke is to use it correctly.

Your mistake is to use more than one "container", since there should only be one.

<div class="container">
    <div class="row">
        <div class="col-md-12>

        <!-- Tambien puede haber rows dentro de las Col -->
            <div class="row">
               <div class="col-md-12>
               </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12>
        </div>
    </div>
</div>

Just be careful, because the class "Row" covers the entire Row, without respecting margins ...

In order to test this theory just leave 1 div with class container .

    
answered by 11.12.2016 в 16:56