배너 이미지의 폭은 100 %이어야합니다.

Question

배너 이미지를 포함 시켰습니다. 내 코드 중 하나에서 잘 작동하지만 다른 코드에 동일한 배너를 포함하면 제대로 작동하지 않습니다. 이유를 말해 줄 수 있어요? 새 코드에서는 배너 외부에 공백이 표시됩니다.

http://jsfiddle.net/rajkumart08/y88WX/29/embedded/result/

.home .hero-unit { 
    background: none; 
    height: 318px; 
    padding: 1px 620px 0 0; 
    margin-right: -100px; 
    margin-left: -100px; 
    margin-bottom: 0; 
    background: url("http://www.defie.co/designerImages/defie_landing_page.png") right bottom no-repeat; 
} 

.hero-unit { 
    padding: 60px; 
    margin-bottom: 30px; 
    background-color: #eee; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
} 

Answer 1

.hero-기기는 1250px이며 배경 이미지는 해당 컨테이너 내에서 선언된다. 어색한 마진은 텍스트가 이미지 위에 겹쳐지지 않는 이유입니다. 실제로 화면의 100 % 인 div 내에서 배경을 정의하십시오. 또한 .container는 화면의 100 %가 아닙니다. 컨테이너와 백그라운드 이미지가있는 .hero-unit을 포함하는 새 div를 만듭니다.

Answer 2

당신이 당신의 '.hero 단위를'포장 된 '.container'선택에 설정되는 폭을 제거합니다. 또한

중첩 할 수 귀하의 '.hero 단위 내부의'.container ' '

<div class="hero-unit'> 
    <div class="container"> // Banner text etc </div> 
</div><!-- /hero-unit -->