JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dropshadow">
  <div class="section">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>
              How do I change the left and right drop shadow placement?  I want the left and right sides to be closer to the left and right boder.  It makes this content look crammed.  I need it to be a little closer to the sides without changing the placement of this content inside.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

@import url('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);
}