﻿@media screen and (max-width: 768px)

{
   #banner > img
    {
        max-width: 100%;
    }
 
    ul.menu-list
   {
      height: auto;
      text-align: justify;
      -ms-text-justify: distribute-all-lines;
      text-justify: distribute-all-lines;
   }
 
   li.menu-item
   {
      margin: 0em 0.2em;
      width: auto;
      vertical-align: top;
      display: inline-block;
      *display: inline;
      zoom: 1;
   }
 
   .stretch
   {
      width: 100%;
      display: inline-block;
      *display: inline;
      zoom: 1;
   }
 
   a.menu-item-link
   {
      font-size: 1.1em;
   }
 
   #wrapper
   {
      width: inherit;
   }
 
   .small-box
   {
      width: inherit;
      float: none;
   }
 
   #wrapper
   {
      float: none;
   }
 
   .social-bar a
   {
      margin-right: 0em;
   }
 
   #newsletter-form
   {
      font-size: 1em;
   }
 
   input#newsletter-email
   {
      width: 10em;
      -webkit-transition: none;
      -moz-transition: none;
      -o-transition: none;
      -ms-transition: none;
      transition: none;
   }
 
   #team-logo-bar a
   {
      text-decoration: none;
      width: 100%;
      display: inline-block;
      text-align: center;
   }
}

<nav class="menu">
   <ul class="menu-list">
      <li class="menu-item">
         <a class="menu-item-link" href="./homepage" title="Homepage">Homepage</a>
      </li>
      ...
      <li class="stretch">
      </li>
   </ul>
</nav>

*display: inline;
zoom: 1;

