Вы сделали два вложенных контейнера. У блока с классом .mixer
ширина фиксирована, а у блока с классом .container
– зависит от ширины экрана.
Поэтому на узком экране блок с классом .mixer
выходит за границу экрана. А на экранах шириной от 1200px
блок с классом .container
оказывается шире, чем блок с классом .mixer
и выходит за его границу.
Исправлять можно разными способами – в зависимости от вашей задачи. Например, можно добавить обоим контейнерам ограничение по ширине:
@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>
Но мне кажется, что код станет понятнее, если оформить класс .mixer
как модификатор класса .container
. А 1024px
задать как 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>