自举两个部分

Question

<section id="mainmatter"> 
<div class="container"> 
<div class="row"> 
<div class ="col-md-12 col-sm-12"> 
<h1> The JuiceBox </h1> 
</div><!--end col--> 
</div><!--end row--> 
</div><!--end container--> 
</section> 

<section id="showcase"> 
<div class="container"> 
<div class="row"> 
<div class ="col-md-6 col-sm-6"> 
<div class="showcase-left"> 
<img src="images/juice.png" height=700 width=700> 
</div> 
</div> 
<div class ="col-md-6col-sm-6"> 
<div class="showcase-right"> 
<p> Lorem ipsum dolor sit amet, m. 
</p> 
</div> 
</div><!--end col--> 
</div><!--end container--> 
</section> 

之间的间隔中/ * SCSS代码*/

#mainmatter{ 
margin-top: 250px; 
margin-bottom: 270px; 

h1{ 
font-family:$design-font; 
font-size: 80px; 
float:right; 
} 
} 


#showcase 
{ 
background-color: greenyellow; 
padding-top:50px; 
} 

.showcase-left 
{ 
margin-top:-70px; 
} 
.showcase-right{ 
margin-top:300px; 
} 
img{ 
margin-left:60px; 
width:90%; 
} 

} 

上面的代码看起来很好与桌面宽度。但是，屏幕较小的两部分之间出现空白区域。我的代码有什么问题？ 另外juice.png没有得到引导。

Answer 1

尝试删除该风格或减少到50个像素或更低

.showcase-right{ 
margin-top:20px; 
}