Any block occupies the entire width of the parent, unless otherwise specified. In your case, the .st parent is main, and the main one has a parent body. The width of the body is equal to the width of the window, also unless otherwise indicated.
If you execute your code, it can be clearly seen - in body margin: 8px and the background of the .st block has the same indentation.
The best solution offered Elena Semenchenko, set the min-width for .st or main. You can also specify for .wrap display: table or display: inline-block, but in this case it is better to become more familiar with the specification in order to know where problems may arise.
With min-width indication
main { 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>
With 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>
With 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>
