Уменьшение маржи коробки-теней без изменения границы содержимого

Question

У меня есть простой сайт начальной загрузки с содержимым, окруженным теневой тень. Я пытаюсь поместить левую и правую тень ближе к границам окна, чтобы содержимое выглядело менее забитым. Я не хочу увеличивать радиус тени, я просто хочу, чтобы теневые стороны были расположены ближе к левой и правой границе.

Вот как это выглядит: Border is too close to content.

Вот мой HTML:

<div class="dropshadow"> 
    <div class="section"> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-12"> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Вот мой CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css"> 

.dropshadow { 
display: table; 
margin: 0 auto; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75); 
-moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75); 
box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75); 
} 

Когда я пытаюсь добавить отступы или изменить левый и правые поля .dropshadow, я испортил размещение контента. Я хочу, чтобы контент оставался там, где он есть. Я бы предпочел сохранить его как дисплей: стол, если вы не думаете, что есть что-то лучше.

Вот скрипка: https://jsfiddle.net/u1ph99pv/2/

Убедитесь, что вы увеличить ширину большого окна достаточно для коробчатой ​​тени появляться, это не проблема на моем сайте, потому что я не отображать его на мобильном режиме.

Answer 1

Вы пытаетесь выровнять по центру свои div.dropshadow?

margin: 0 auto; поможет вам в этом. Если вы измените значение с auto на значение, ваш div автоматически будет выровнен по левому краю. (Прокладка не влияет на выравнивание div.dropshadow)

Одно из решений: набор набивка (например padding: 0 50px) для родителя вашего div.dropshadow (сейчас это < тело>),

и установить display: block для вашего div.dropshadow.

Пожалуйста, попробуйте его в проекте. Похоже, он работает на скрипке.