title: Logo image in the center of a menu doesnt sit right
body: <p>Ok so i have searched through probably 50 or so threads here on SO and cant find a solution yet. i have a navigation bar that is 1000px wide by 47px tall. i have a logo that is 135px tall and 167px wide. i want this image to sit dead center on the menu and extend above it. the image has the angled design i want to connect to the edges of the menu on either side. here is a mockup of what i would like for it to look like vs how it looks now.</p>
  
  <p><img src="https://i.imgur.com/mXsqsio.png" alt="Mockup + Current Screenshot"></p>
  
  <p>My CSS:</p>
  
  <pre><code>.masthead {
      height: 70px;
      background-image: url(../img/rmr-masthead.png);
      background-repeat: no-repeat;
      background-position: center center;
  }
  /* == Nav Menu == */
  .ribbon {
      width: 1000px;
      max-height: 47px;
      position: absolute;
      text-align: center;
      font-size: 17px!important;
      background: #bd7d4c;
      background: -webkit-gradient(linear, left top, left bottom, from(#bd7d4c), to(#7a4520));
      background: -webkit-linear-gradient(top, #bd7d4c, #7a4520);
      background: -moz-linear-gradient(top, #bd7d4c, #7a4520);
      background: -ms-linear-gradient(top, #bd7d4c, #7a4520);
      background: -o-linear-gradient(top, #bd7d4c, #7a4520);
      background-image: -ms-linear-gradient(top, #bd7d4c 0%, #7a4520 100%);
      -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
      box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  }  
  .ribbon:before, .ribbon:after {
      content:'';
      position: absolute;
      display: block;
      bottom: -1em;
      border: 1.5em solid #754a15;
      z-index: -1;
  }
  .ribbon:before {
      left: -2em;
      border-right-width: 1.5em;
      border-left-color: transparent;
      -webkit-box-shadow: rgba(000, 000, 000, 0.4) 1px 1px 1px;
      -moz-box-shadow: rgba(000, 000, 000, 0.4) 1px 1px 1px;
      box-shadow: rgba(000, 000, 000, 0.4) 1px 1px 1px;
  }
  .ribbon:after {
      right: -2em;
      border-left-width: 1.5em;
      border-right-color: transparent;
      -webkit-box-shadow: rgba(000, 000, 000, 0.4) -1px 1px 1px;
      -moz-box-shadow: rgba(000, 000, 000, 0.4) -1px 1px 1px;
      box-shadow: rgba(000, 000, 000, 0.4) -1px 1px 1px;
  }
  .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
      border-color: #66320f transparent transparent transparent;
      position: absolute;
      display: block;
      border-style: solid;
      bottom: -1em;
      content:'';
  }
  .ribbon .ribbon-content:before {
      left: 0;
      border-width: 1em 0 0 1em;
  }
  .ribbon .ribbon-content:after {
      right: 0;
      border-width: 1em 1em 0 0;
  }
  .nav {
      list-style-type:none;
      margin:0;
      padding:0;
      margin-left: auto;
      margin-right: auto;
      width: 901px;
      height: 0;
  }
  .nav li {
      display:block;
      float: left;
  }
  .nav li a {
      display:block;
      position: relative;
      z-index: 1;
      padding-top: 13px;
      padding-bottom: 12px;
      margin-left: 1px;
      width: 120px;
      font-size: 16px;
      color: #f5f5f5;
      text-shadow: #493724 0 -1px 0;
      text-decoration: none;
      border-right: 1px solid #6b3700;
      -webkit-box-shadow: 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
      -moz-box-shadow: 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
      box-shadow: 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
  }
  .nav li:first-child {
      border-left: 1px solid #6b3700;
      -webkit-box-shadow: inset 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
      -moz-box-shadow: inset 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
      box-shadow: inset 1px 0px 0px 0px rgba(212, 154, 91, 0.49);
  }
  .nav li a:before {
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      opacity: 0;
      background: #c3885b;
      /* Old browsers */
      background: -moz-linear-gradient(top, #c3885b 0%, #905226 100%);
      /* FF3.6+ */
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c3885b), color-stop(100%, #905226));
      /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(top, #c3885b 0%, #905226 100%);
      /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(top, #c3885b 0%, #905226 100%);
      /* Opera 11.10+ */
      background: -ms-linear-gradient(top, #c3885b 0%, #905226 100%);
      /* IE10+ */
      background: linear-gradient(to bottom, #c3885b 0%, #905226 100%);
      /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c3885b', endColorstr='#905226', GradientType=0);
      /* IE6-9 */
      -webkit-transition: all 250ms linear;
      /* before hack */
      content:".";
      text-indent: -99999px;
  }
  .nav li a:hover:before {
      opacity: 1;
  }
  .ribbon img {
      position: relative;
      margin-top: -100px;
      background-color: whitesmoke;
      float: left;
      padding: 0;
      margin: 0;
      width: 167px;
      height: 117px;
      vertical-align:bottom;
      display: inline-block;
  }
  </code></pre>
  
  <p>My HTML</p>
  
  <pre><code>&lt;div class="masthead"&gt;
  &lt;/div&gt;
  
  &lt;div class="ribbon"&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="index"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="about"&gt;About Us&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="about"&gt;About Bison&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;img src="./img/logo-nav.png"&gt;
      &lt;ul class="nav"&gt;
          &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="recipies"&gt;Recipies&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="products"&gt;Products&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="contact"&gt;Contact Us&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>