내용 여백을 변경하지 않고 상자 - 그림자 여백을 줄입니다

Question

나는 드롭 섀도우로 둘러싸인 내용을 가진 간단한 부트 스트랩 웹 사이트를 가지고 있습니다. 나는 내용을 덜 벼락치 않게하기 위해 왼쪽과 오른쪽 드롭 섀도우를 창 테두리쪽으로 더 가깝게하려고 노력하고 있습니다. 나는 그림자 반경을 증가시키고 싶지 않다, 나는 단지 그림자가 좌우의 경계에 더 가깝게 배치되기를 바란다. 나는 패딩을 추가 또는 왼쪽을 변경하려고 할 때

<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); 
} 

: 여기

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

내 CSS입니다 : 여기

Border is too close to content. 내 HTML입니다 : 여기

는 것 같습니다 무엇 .dropshadow의 오른쪽 여백, 나는 내용의 배치를 엉망으로 만든다. 콘텐츠가있는 곳에서 머물고 싶습니다. 나는 그것을 더 나은 것으로 생각하지 않는 한, 그것을 전시 : 테이블로 유지하는 것을 선호한다. https://jsfiddle.net/u1ph99pv/2/

당신은 내가 모바일보기에 표시하지 않기 때문에 내 웹 사이트에 문제가 아니에요, 창이 표시 상자 그림자 충분히 큰 폭 증가해야합니다 : 여기

는 바이올린입니다.

Answer 1

div.dropshadow의 가운데 맞춤을하려고하십니까?

margin: 0 auto; 당신이 그렇게하는 데 도움이됩니다. auto에서 값으로 변경하면 div가 자동으로 왼쪽 정렬됩니다.

하나의 솔루션입니다 (패딩 div.dropshadow의 정렬에 영향을주지 않습니다) : 당신의 div.dropshadow의 부모에 대한 설정 패딩 (예 : padding: 0 50px) (지금 당장은 < 몸>)

및 대한 display: block을 설정하여 div.dropshadow.

프로젝트에서 사용해보십시오. 바이올린에서 작동하는 것처럼 보입니다.