The div's coloring extends beyond the margins

My page is set at a width of 970px. Everything looks good, with the paragraph aligned within the margin. However, when I try to apply color, it extends outside the margin.

<div class="container">

            <header>
                <nav class="navbar navbar-default navegacion">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">Toggle Navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a href="#" class="navbar-brand texto"><strong>Amixer Music</strong></a>
                    </div>

                    <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav textomenu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Translator Amixer</a></li>
                        <li><a href="#">Yahoo Fail</a></li>
                    </ul>
                </div>
                </nav>
            </header>

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <a href="#"><img class="img-responsive" src="img/amixermusic2.png" alt="AmixerMusic"/></a>
                    </div>
            </div>

            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 alineado">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
            </div>

        </div>

// Not stuff like this which is a code comment :-)

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 16px;
    height: 100%;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/*My personal css*/

/* Custom container */
.container{
  padding: 0px;
  max-width: 970px;
  margin-top: 2%;
  border: 5px solid #2E2E2E;
        -webkit-border-radius: 10px;
           -moz-border-radius: 10px;
                border-radius: 10px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.imagen
{
    width: 100%;
}

.navegacion
{
    width: 100%;
    margin-bottom: 0%;
}

.texto
{
    font-family: 'Nunito', serif;
    font-size: 25px;
    text-shadow: 4px 4px 4px #aaa;
}

.textomenu
{
    font-family: 'Nunito', serif;
    font-size: 20px;
}

.alineado
{
    background-color: orange;
    margin-right: 0%;
    margin-left: 0%;
}

.color2
{
    background-color: blue;
}

Answer №1

The reason for this issue is that Bootstrap automatically includes a -15px margin on the left and right side of all elements with the class .row:

.row {
    margin-left: -15px;
    margin-right: -15px;
}

To fix this, simply reset the margin like so:

.row {
    margin: 0
}

Check out a demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update content and image when clicking or hovering using Javascript

I have successfully implemented an image change on mouseover using javascript. However, I am facing a challenge in adding a description below the image upon mouseover or click. I do not have much experience with jQuery and would appreciate any help in so ...

Adapt the CSS based on different screen sizes

I am currently developing a mobile application using angularjs and the ionic framework. My application is intended for both tablet and mobile versions. I have encountered an issue where I cannot use the same CSS for both the tablet and mobile versions. Is ...

Utilize SVGs efficiently by loading them once and reusing them

Is it possible to use the same SVG element twice on a web page without having to load it again? I am changing the CSS of the SVG using JavaScript, so I believe the SVG must be directly embedded in the HTML rather than included as an object. Both instance ...

Integrating dynamic PHP echo strings from a database into an established CSS layout

I am currently exploring PHP and MySQL databases, and I have managed to develop a basic search engine for my website. However, I am facing an issue that I am struggling to resolve: Is there a way to integrate the PHP echo output (search results) into the ...

What is the importance of using mb_convert_encoding in order to display the characters correctly?

My website and MySQL database are both set to use UTF-8 encoding. An issue I am encountering is that when retrieving text from the MySQL database to display on the website, I need to utilize the PHP function mb_convert_encoding(@db_field,'utf-8' ...

What is the best method to retrieve duplicate fields from a database in HTML5?

this.db.transaction(function (tx) { tx.executeSql('SELECT tsk.*, cont.firstName, cont.lastName ,cont1.firstName, cont1.lastName, list.listId FROM tbl_tasks tsk, tbl_contacts cont,tbl_contactequests cont1, tbl_lists list WHE ...

Floating hover box gracefully descends as you hover over it

While working on this particular site, I encountered an issue with the password being set as joint123. There was a map displayed with icons on the right side, and when hovering over the icons, the corresponding address would appear. However, the problem ar ...

Is there a way to pick up text where a div element ends using Bootstrap or HTML?

Using Bootstrap, I placed a div on the right and now I want the text outside to seamlessly continue from where the text inside the div ends. You can see the visual representation of what I'm aiming for in this picture. Any suggestions on how to achiev ...

When using angular's ngHide directive on a button, it will still occupy space in the

At the bottom of this HTML file, there are 3 buttons displayed. The first image illustrates the layout of the 3 buttons. The second image demonstrates what happens when the middle button in the footer is commented out. The third image shows the situat ...

Use jQuery to add and remove classes while opening and closing div elements individually

I am working on a page that contains hidden fullscreen divs. My goal is to be able to open these divs individually by clicking on the corresponding button and close them by clicking the "close" button inside the div. Currently, I am able to open a div suc ...

div maintain aspect ratio while scaling

My current layout is structured like this: HTML <div id="container"> <div id="zoomBox"> <div class="box"></div> <div class="box"></div> <div class= ...

How to perfectly center an absolute positioned icon on a 767px screen

The icons positioned absolutely in the two columns must remain center aligned across all screen resolutions. The media query below attempted to align the icon on mobile devices, but it is inaccurate for any resolution. How can I correct the CSS? @media scr ...

Creating a choppy movement when switching between content with jQuery

I am experiencing a choppy effect when trying to toggle the content visibility with a button click. Can someone advise if there are any issues in how I have structured the markup? Also, is there a way to achieve a smoother toggle effect? View Code $(do ...

When the browser back button is clicked, conceal the current div and reveal the previously hidden div

I'm faced with a situation where my website consists of multiple pages which I've achieved by displaying and hiding divs within a single html file. The issue I'm encountering is that the browser's back and forward buttons aren't fu ...

Unusual SVG Cubic Bezier Animation Transforming Curves into Points and Lines

As a beginner in SVG CSS animation, I am currently working on morphing three curved paths into three rectangles using cubic bezier routes. While I have managed to make it work, there is an issue during the transition where parts of it skew inward in a stra ...

Remove the boundaries from the grid and only retain the box

I am not skilled in css, but I simply want to eliminate the interior edges of the box and retain only the outer edges. .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-ite ...

Incorporating orientation settings within a media query using MUI

In my current project, I am utilizing MUI in conjunction with React. To specifically style the iPad resolution using MUI breakpoints, I have implemented the following code snippet: contentBox:{ width:"10%", paddingLeft:"10p ...

Is retrieving data from the database causing unexpected additional space to appear in the textarea?

I am facing an issue with a basic php file that fetches information from a MySQL database and displays it inside a textarea. However, when I access the file through browsers, there seems to be extra space at the start and end of the text within the textare ...

What could be causing Typed.js to not function properly in my situation?

Having an issue with typed.js not functioning properly. Here is the code snippet: <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.11.3.min.js"></script> <!-- Include all compiled plugins ...

Expanding <a> element to cover the entire <li> container

Take a look at this straightforward menu layout: <ul id="menu"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> </ul> I'm looking to expand the <a> element so that it ...