Any block shall bear the whole breadth of the parent unless otherwise indicated. In your case, the parent is main and the main parent has the body. The body width is equal to the width of the window, also unless otherwise specified.If you do your code, it's good to see, the body has a margin: 8px and the background of the block ...st has the same deviation.Elena Semenchenko suggested the best solution, ask min-width for .st or main.
Also for .wrap display: table or display: inline-block, but in this case, the specification will be more detailed to know where problems may arise.min-widthmain {
min-width: 800px;
}
.st {
background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) center/cover no-repeat;
}
.wrap {
width: 800px;
}<main>
<div class="st">
<div class="wrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum
in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta,
sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam
reprehenderit.
</p>
</div>
</div>
</main>By display:inline-block.st {
display: inline-block;
background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) center/cover no-repeat;
}
.wrap {
width: 800px;
}<main>
<div class="st">
<div class="wrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum
in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta,
sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam
reprehenderit.
</p>
</div>
</div>
</main>By display:table.st {
display: table;
background: url(http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg) center/cover no-repeat;
}
.wrap {
width: 800px;
}<main>
<div class="st">
<div class="wrap">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat et in culpa, esse animi sunt deleniti quibusdam quae debitis quidem ut voluptate autem, accusantium impedit perferendis aliquid expedita dolores blanditiis mollitia sapiente. Magni, cum
in atque nulla inventore voluptatibus blanditiis nihil aperiam placeat velit, eaque sit sapiente, labore vitae nisi. Vero laborum fugit saepe ullam illo maxime aliquid consequatur, officiis amet nostrum quia quae ratione ad praesentium soluta,
sed eligendi, cupiditate quis explicabo distinctio maiores fugiat ipsum ab voluptate. Consectetur dolor repudiandae enim asperiores non, rerum, unde sapiente accusamus? Accusamus saepe praesentium ipsa, amet accusantium fugit, ut sit quisquam
reprehenderit.
</p>
</div>
</div>
</main>
