Problem with Gradient

Gradient Problems

HTML

<body> 
    <header id="top" class="main-header">
      <div class="span-text">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
      <img class="arrow" src="img/arrow.svg" alt="Down arrow">
      </div>
      <div class="gradient-layer-image">
      
    </div>
    </header>
    
		<div class="primary-content t-border">
			<p class="intro">
				Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
			</p>
			<a class="callout" href="#more">Find out more</a>
      <div class="wildlife">
        <h2>Check out all the Wildlife</h2>
        <p>
          As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
        </p>
      </div><!-- End .wildlife -->
      
			<a class="callout" href="#wildlife">See the Wildlife</a>
		</div><!-- End .primary-content -->

		<div class="secondary-content t-border group"> 
      <div class="resorts">
        <img src="img/resort.jpg" alt="Resort">
        <h3>From Tents to Resorts</h3>
        <p>
          Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
        </p>
        <ul>
          <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
          <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
          <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
        </ul>		
      </div>
      
      <div class="tips">
        <img src="img/mtn-landscape.jpg" alt="Mountain Landscape">
        <h3>Pack Accordingly</h3>
        <p>
          One of...

CSS

/*** [VARIOUS WAYS TO SELECT] ***/
/*

	1 UNIVERSAL SELECTOR "*"
	2 TYPE SELECTOR "element-name"
	3 CLASS SELECTOR ".class-name"
	4 ID SELECTOR "#id-name"
	5 PSUEDO SELECTOR "element:psuedo-element" [STYLES SPECIAL STATES OF AN ELEMENT]
	6 DESCENDANT SELECTOR "element nested-element nested-element ..."


*/

*{
	box-sizing:border-box;
}

body{
	color:#878787;
	margin:auto;
	cursor: url("../img/midna-cursor.png"), auto;
	font:normal 1em/1.5 "Helvetica Neue", Arial, sans-serif;
}

.main-header{
	padding-top:0px;
	height:850px;
	background:#f93 url("../img/mountains.jpg") no-repeat center / cover;
}

.gradient-layer-image{
	background-image:linear-gradient(to right, firebrick, tomato,#ffa949,#ccff66);
	opacity:.25;
	position:absolute;
	top:0px;
	left:0px;
	height:850px;
	width:100%;
	z-index:1;

}


.span-text h1,
.span-text span{
	z-index:2;
}

.main-header .title{
	color:white;
	font-size:1.625rem; /* 26px / 16px = 1.625em */
}

ol li{
	color:black;
	margin-bottom:5px;
}

h1{
	font-size:5.625rem; /* 90px / 16px = 5.625em */
	color:white;
	text-transform:uppercase;
	font-weight:normal;
	line-height:1.3;
	text-shadow:5px 8px 5px #222;
}

h2{
	font-size:3.3125rem; /* 53px / 16px = 3.3125em */
	font-weight:normal;
	line-height:1.1;
	margin-bottom:.5em; /* 26px */
}

h3{
	font-size:1.25em;
	color:#48525c;
	line-height:1.2;
	margin-bottom:1.7em; /* 34px */
}

img{
	max-width:100%;
	margin-bottom:20px;
}

ul,
ol{
	padding-left:0;
	margin: 30px 0;
}

li{
	margin-bottom:10px;

}


.primary-content, 
.main-header{
	text-align:center;
}

.primary-content,
.secondary-content{
	width:75%;
	padding-left:50px;
	padding-right:50px;
	margin: auto;
	max-width:900px;
}

.secondary-content{
	padding-top:80px;
	padding-bottom:70px;
	border-bottom:2px solid #dfe2e6;
}

.t-border{
	border-top:2px solid lightgrey;
}

.callout{
	font-size:1.25em;
	border-bottom:3px solid;
	padding:0 9px...