Decrease Box-Shadow Margin Without Changing Content Margin

Question

I have a simple bootstrap website with the content surrounded by a drop-shadow. I am trying to place the left and right drop-shadow closer towards the window borders to make the content look less crammed. I am not wanting to increase the shadow radius, I just want the shadow sides to be placed closer to the left and right border.

Here's what it looks like: Border is too close to content.

Here is my HTML:

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

Here is my 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);
}

When I try to add padding or change the left and right margins of .dropshadow, I mess up the content's placement. I want the content to stay where it is. I would prefer to keep it as display: table, unless you think there is something better.

Here is fiddle: https://jsfiddle.net/u1ph99pv/2/

Make sure you increase window width large enough for the box-shadow to appear, it's not a problem on my website because I don't display it on mobile view.

Answer 1

Are you trying to center-align your div.dropshadow?

margin: 0 auto; helps you do that. If you change from auto to a value, then your div will be automatically left-aligned. (padding doesn't affect the alignment of div.dropshadow)

One solution is: set padding (ex padding: 0 50px) for the parent of your div.dropshadow (right now it is < body >),

and set display: block for yourdiv.dropshadow.

Please try it in you project. Looks like it works in the fiddle.