两个部分之间的自举间距

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

尝试删除此样式或减少到50px或更少

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