Нужно что бы при заходе на .wrapper линия ( #main-top .line ) оказалась под ним и не виднелась. Задавать background нельзя. Нужно для мобильной версии, что бы при уменьшении экрана линия не заходила на контент.
.wrapper {
position: relative;
box-sizing: border-box;
display:block;
margin: 0 auto;
width: 100px;
height: 100px;
max-width: 1300px;
z-index: 100;
margin-left:-0px;
border:1px solid black;
}
#main-top {
position: relative;
margin-bottom: 180px;
margin-top: 90px;
}
#main-top .line {
width: 150px;
height: 1px;
display: block;
position: absolute;
z-index:1;
top: 5px;
left: 0;
background: rgba(178,37,63,1);
background: -moz-linear-gradient(left, rgba(178,37,63,1) 0%, rgba(219,59,56,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(178,37,63,1)), color-stop(100%, rgba(219,59,56,1)));
background: -webkit-linear-gradient(left, rgba(178,37,63,1) 0%, rgba(219,59,56,1) 100%);
background: -o-linear-gradient(left, rgba(178,37,63,1) 0%, rgba(219,59,56,1) 100%);
background: -ms-linear-gradient(left, rgba(178,37,63,1) 0%, rgba(219,59,56,1) 100%);
background: linear-gradient(to right, rgba(178,37,63,1) 0%, rgba(219,59,56,1) 100%);
<div id="main-top" class="outer">
<span class="line"></span>
<div class="wrapper">
</div>
</div>