У вас так получается, потому что при суммировании ширины блока width: 100%;
и отступов margin: 0 50px;
, в общей сложности ширина получается: 100% + 100px.
В этом случае ширину блока следует указать так:
width: calc(100% - 100px);
Таким образом вы отнимаете отступы margin: 0 50px;
.
Про свойство calc
можно почитать здесь.
Вот пример:
* {box-sizing: border-box; margin: 0; padding: 0;}
body {background: lightgray;}
.block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
width: calc(100% - 100px);
max-width: 960px;
margin: 0 50px;
}
<div class="block">
<p>Стихи Пушкина – это богатейшее культурное наследие, подаренное миру. Всю жизнь он занимался тем, что обращал чувства в строки. Александр Сергеевич был невероятно талантливым человеком. Диапазон тем, которые он отображал в стихах, поражает своей широтой. Добрые и глубокомысленные сказки для детей, саркастичные эпиграммы, нежные стихи о любви, о верной дружбе, веселье и вине, самоироничные строчки о себе и о своем творчестве.</p>
<p>Не обошел стороной он и государственные события: писал о войне, о Родине, о России.</p>
</div>
Хотя, возможно, я не совсем верно понял задачу. Может быть нужно позиционировать блок таким образом?
* {box-sizing: border-box; margin: 0; padding: 0;}
body {background: lightgray;}
.block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 50px), -50%);
background-color: white;
width: 100%;
max-width: 960px;
margin: 0 50px;
}
<div class="block">
<p>Стихи Пушкина – это богатейшее культурное наследие, подаренное миру. Всю жизнь он занимался тем, что обращал чувства в строки. Александр Сергеевич был невероятно талантливым человеком. Диапазон тем, которые он отображал в стихах, поражает своей широтой. Добрые и глубокомысленные сказки для детей, саркастичные эпиграммы, нежные стихи о любви, о верной дружбе, веселье и вине, самоироничные строчки о себе и о своем творчестве.</p>
<p>Не обошел стороной он и государственные события: писал о войне, о Родине, о России.</p>
</div>