title: Why is ul aligned to the bottom
body: <p>I have been seriously messing with this one thing for over an hour now. Basically I have a navigation bar, there is an icon on the far left, and the links are aligning to the bottom of the image. </p>
  
  <p>I have tried messing with padding, margins, line height, vertical-align and everything else I could think of. I also tried having the image inside and before the ul. I need the ul items (will be links) to be vertically aligned to the center of the icon. </p>
  
  <p>I have put all the code into one file that I will copy here. Also, when you post please explain why a solution will work, not just post code. The other posts I searched for about this before I posted here didn't explain anything, just included code that didn't help when I tried it. Unfortunately, because I have no idea what the solution is or what it relates to I am including all of the code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    /*background-color: #10f009;*/
    font-size: 62.5%;
    font-family: sans-serif;
  }
  img {
    margin: 0 0 0 0;
    max-width: 100%;
    height: 50%;
  }
  .smallSection {
    margin: 100px;
  }
  .paragraph {
    font-size: 2em;
    max-width: 500px;
  }
  .title {
    font-size: 2.4em;
  }
  .list {
    list-style: solid inside url("");
    font-size: 2em;
  }
  .nav-link {
    list-style-type: none;
    display: inline-block;
    text-align: center;
    font-size: 2em;
    width: 200px;
    border: 1px solid red;
  }
  .nav-icon {
    display: inline-block;
    border: 1px solid red;
  }
  .largeSection {} #section1 {
    background-image: url("../img/placeholder.jpg")
  }
  #nav {
    border: 1px solid red;
    margin: 0;
    padding: 0;
    align: top;
    height: 100px;
    line-height: 1;
  }
  /*temporary*/
  
  div {
    border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Dawn Little --&gt;
  &lt;div id="section1" class="largeSection"&gt;
    &lt;!-- Navigation --&gt;
    &lt;div&gt;
      &lt;ul id="nav"&gt;
        &lt;div style="width:70px;height:70px;border: 1px solid red;display: inline-block;"&gt;
          &lt;!-- The img link is obviously broken so this is here instead. --&gt;
        &lt;/div&gt;
        &lt;!-- &lt;img src="img/herbfalife-icon.png" width="70px" height="70px" class="nav-icon"&gt; --&gt;
        &lt;li class="nav-link"&gt;Who am I&lt;/li&gt;
        &lt;li class="nav-link"&gt;What I do&lt;/li&gt;
        &lt;li class="nav-link"&gt;3-Day Trial&lt;/li&gt;
        &lt;li class="nav-link"&gt;Challenges&lt;/li&gt;
        &lt;li class="nav-link"&gt;Become a Coach&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="smallSection"&gt;
      &lt;p class="paragraph"&gt;
        &lt;span class="title"&gt;Client Name&lt;br /&gt;&lt;/span&gt; Hi, I'm a wife, mother, and Personal Wellness Coach with Herbalife Nutrition. My super power - I change lives.
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- What I do --&gt;
  &lt;div id="section2" class="largeSection"&gt;
    &lt;div class="smallSection"&gt;
      &lt;p class="paragraph"&gt;
        &lt;span class="title"&gt;What I do&lt;/span&gt;
        &lt;ul class="list"&gt;
          &lt;li&gt;Wellness Evaluations&lt;/li&gt;
          &lt;li&gt;Nutrition Coaching&lt;/li&gt;
          &lt;li&gt;Impact Lifestyle&lt;/li&gt;
          &lt;li&gt;Get Results&lt;/li&gt;
          &lt;li&gt;Coach Coaches&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- 3-day trial --&gt;
  &lt;div id="section3" class="largeSection"&gt;
    &lt;div class="smallSection"&gt;
      &lt;p class="title"&gt;
        Try Our 3-Day Trial
      &lt;/p&gt;
      &lt;p class="title"&gt;
        What you get:
      &lt;/p&gt;
      &lt;ul class="list"&gt;
        &lt;li&gt;Personal Wellness Coach&lt;/li&gt;
        &lt;li&gt;Wellness Evaluation&lt;/li&gt;
        &lt;li&gt;Meal Plan&lt;/li&gt;
        &lt;li&gt;Daily Support&lt;/li&gt;
        &lt;li&gt;Plan of Action&lt;/li&gt;
        &lt;li&gt;6 Meals&lt;/li&gt;
        &lt;li&gt;Metabolism Booster&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Challenges --&gt;
  &lt;div id="section4" class="largeSection"&gt;
    &lt;div class="smallSection"&gt;
      &lt;p class="title"&gt;
        Join a Weight Loss Challenge
      &lt;/p&gt;
      &lt;p class="title"&gt;What you get:&lt;/p&gt;
      &lt;ul class="list"&gt;
        &lt;li&gt;Personal Wellness Evaluation&lt;/li&gt;
        &lt;li&gt;Personalized Program&lt;/li&gt;
        &lt;li&gt;Nutrition Classes&lt;/li&gt;
        &lt;li&gt;ommunity of Support&lt;/li&gt;
        &lt;li&gt;Accountability&lt;/li&gt;
        &lt;li&gt;Opportunity to Win Cash &amp;amp Prizes&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Become a coach --&gt;
  &lt;div id="section5" class="largeSection"&gt;
    &lt;div class="smallSection"&gt;
      &lt;p class="title"&gt;
        Become a Coach
      &lt;/p&gt;
      &lt;p class="title"&gt;
        What you get:
      &lt;/p&gt;
      &lt;ul class="list"&gt;
        &lt;li&gt;Opportunity to Change Lives&lt;/li&gt;
        &lt;li&gt;Opportunity for Personal &amp;amp Financial Growth&lt;/li&gt;
        &lt;li&gt;Training&lt;/li&gt;
        &lt;li&gt;Potential to Change Lives in Over 90 Countries&lt;/li&gt;
        &lt;li&gt;Be Part of a Team&lt;/li&gt;
        &lt;li&gt;Get in the Best Shape You've Ever Been&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>