title: Having trouble with this layout, how to stretch the gradient and move the main div to the center?
body: <p>Currently, I linked my JSfiddle below.</p>
  
  <p>I have my horizontal Gradient working, stretches completely. However my vertical gradient only stretches to the bottom of the text, I really would like it to stretch to the bottom of the page. Any height code I use does not work.</p>
  
  <p>Also I am attempting to make everything in the 'main' class centered. Unless I manually  the text it does not work. I tried putting height and width to auto in the CSS but id does nothing.</p>
  
  <p>Could somone help me get this page aligned correctly please?</p>
  
  <p>I was hoping for what is in this picture: <a href="http://imgur.com/9F5wLak" rel="nofollow">http://imgur.com/9F5wLak</a></p>
  
  <p>Header (gradient)</p>
  
  <p>Nav (gradient) | main content in the middle</p>
  
  <p>footer</p>
  
  <p><a href="http://jsfiddle.net/nejhrfjz/4/" rel="nofollow">http://jsfiddle.net/nejhrfjz/4/</a></p>
  
  <p>Here is my current CSS:</p>
  
  <pre><code>.gradient {
  background-image:
  linear-gradient(
   to right, 
   #276BE7 50% , #3079E7, #ffffff
  );
  margin:0;
  display:inline-block;
  width: 100%;
  }
  
  .gradientb {
  background-image:
  linear-gradient(
   to bottom, 
   #276BE7 , #3079E7, #ffffff
  );
  margin:0;
  display:inline-block;
  height: 100%;
  }
  body {
  margin: 0;
  background-color: #000000
  }
  
  nav {
  margin:0;
  }
  
  #main {
  float: left;
  color: yellow;
  width: 80%;
  }
  </code></pre>