Why .row my mesh ( .row with all .col-md ) go beyond the boundaries of the parent container?

 .mixer { width: 1024px; height: 200px; border: 3px solid #6B70F0; margin: 0 auto; border-radius: 5px; } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="mixer"> <div class="container"> <div class="row"> <div class="col-md-10"> <p>НастройтС ΠΈ скачайтС свою минусовку:</p> </div> <div class="col-md-2"> <button class="playbtn"></button> </div> </div> </div> </div>

  • Designed your code so that it can be executed and see the result. Add your styles to it. Without them, we will not see your problem. - Gleb Kemarsky
  • so far only one style for the parent container. Added by - PolonskiyP
  • @PolonskiyP Added answer, do you want it? - Vadim Ovchinnikov

3 answers 3

so everything works

 .container { background: red; width: 1019px; margin-right: auto; margin-left: auto; }

    You have made two nested containers. For a block with a class .mixer width is fixed, and for a block with a class .container - depends on the width of the screen .

    Therefore, on a narrow screen, a block with a class .mixer extends beyond the screen boundary. And on screens as wide as 1200px block with a class .container is wider than a block with a class .mixer and goes beyond its boundary.

    You can fix it in different ways - depending on your task. For example, you can add a width limit to both containers:

     @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .container, .mixer { max-width: 100%; } .mixer { width: 1024px; height: 200px; border: 3px solid #6B70F0; margin: 0 auto; border-radius: 5px; } 
     <div class="container mixer"> <div class="row"> <div class="col-md-10"> <p>НастройтС ΠΈ скачайтС свою минусовку:</p> </div> <div class="col-md-2"> <button class="playbtn"></button> </div> </div> </div>

    But it seems to me that the code will become clearer if you issue the .mixer class as a modifier of the .container class. And 1024px set as max-width .

     @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'); .container.mixer { max-width: 1024px; height: 200px; border: 3px solid #6B70F0; margin: 0 auto; border-radius: 5px; } 
     <div class="container mixer"> <div class="row"> <div class="col-md-10"> <p>НастройтС ΠΈ скачайтС свою минусовку:</p> </div> <div class="col-md-2"> <button class="playbtn"></button> </div> </div> </div>

      The fact is that markup using float does not guarantee finding elements on a single line, so use flexbox. Add a meaningful class (suitable semantically) for .row , for example, music-container and add display: flex; . To make the button to the right, you can simply assign its container margin-left: auto; .

      Ready example:

       .mixer { width: 1024px; height: 200px; border: 3px solid #6B70F0; margin: 0 auto; border-radius: 5px; } .music-container { display: flex; width: 100%; } .playbtn-container { margin-left: auto; } 
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="mixer"> <div class="container"> <div class="row music-container"> <div class="col-md-10"> <p>НастройтС ΠΈ скачайтС свою минусовку:</p> </div> <div class="col-md-2 playbtn-container"> <button class="playbtn"></button> </div> </div> </div> </div>

      • In your fix, col-md-10 and col-md-2 do not work. Inspect. After all, row is much wider! - PolonskiyP
      • It is even visible to the naked eye. Button should be significantly to the right - PolonskiyP
      • @PolonskiyP This is something with bootstrap . For some reason, I don’t see the col-md-10 , col-md-2 styles to have a percentage width. - Vadim Ovchinnikov
      • @PolonskiyP Added a solution that does not depend on boostrap (but does not contradict it). - Vadim Ovchinnikov
      • @VadimOvchinnikov Look for col-md-10 and col-md-2 at maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css - Gleb Kemarsky