title: Navigation and Logo Same Line
body: <p>Weebly Menus and logos
  So I have been reading everywhere that I can think of online to fix an issue with logo and navigation being on the same line. And yes I have attempted the other articles on Stackoverflow.</p>
  
  <p>I have changed lines of code, added lines of code and it moves things around but refuses to put them on the same lines.</p>
  
  <p>The code is this: </p>
  
  <pre><code>/* LOGO &amp; MENU */
      #header{
      width: 100%;
      height: auto;
      padding: 0;
      margin: 0;
  }
  
  .navContainer{
      width: 500px;
      height: auto;
      background: url('navbg.jpg') repeat;
      text-align: right;
      display: inline;
      overflow: hidden;
  }
  
  .logo {
      width: 200px;
      min-height: 20px;
      height: auto;
      margin: none;
      float: left;
      display: inline;
  }
  span.wsite-logo {line-height: 1;}
  #logo, #logo a, #wsite-title {
    color: #2a2a2a !important;
    text-decoration: none !important;
    font-family: "Open Sans", sans-serif; 
    font-size: 44px; 
    font-weight: lighter;
    font-weight: 300;
    line-height: 1;
  }
  
  
  /* Navigation Menu */
  #navigation{
      float: right; 
      border-bottom: 1px solid #eee;
      border-top: 1px solid #eee; 
      height: 100px;
      display:inline;
      overflow: hidden;
  }
  #navigation a, #icontent #navigation li:last-child a{ 
      display:inline-block; 
      text-decoration:none; 
      line-height:  1;
      padding: 20px 16px;
      border-right: 1px solid #eee;
  }
  #navigation li:last-child a, #icontent #navigation span:last-child li a{border-right:     none;}
  #navigation ul{margin:  0;  list-style:  none;}
  #navigation li{display:inline;}
  #weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 0; }
  #weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
  #weebly-menus .weebly-menu li { width: 162px; text-align: left; margin-top: 2px;}
  #weebly-menus .weebly-menu li a { 
          border: none; 
          display: block; 
          background-color: #ffffff; 
          text-decoration: none; 
          font-size: 12px; 
          font-weight: normal; 
          line-height:1;
          padding: 5px 0px;  
          color: #000;
          font-family: Helvetica, sans-serif;
          width: 160px;
          height:  auto;
          border: 1px solid #eee;
  }
  
  #weebly-menus .weebly-menu-wrap, #wsite-menus .wsite-menu-wrap {
      z-index:  5000; 
      margin:  0; 
      postiion:  relative !important;
  } 
  </code></pre>
  
  <p>Please help. I am wanting to learn more but do you ever get to the point where your brain is just fried from trying different what you hope are solutions, and it turns out not to work. THAT IS WHERE I AM RIGHT NOW!!!!</p>
  
  <p>The link to the site is this :<a href="http://testervc.weebly.com/" rel="nofollow">Site preview</a>
  Also I am having trouble putting simple text to the right of the navigation.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="viewport" content="width=1024"&gt;
  
  &lt;!-- Fonts --&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'&gt;
  
  &lt;!-- JS --&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt; 
  
  &lt;/head&gt;
  
  &lt;body class='tall-header  wsite-theme-light'&gt;
  
  &lt;div class="note" style="text-align: center;"&gt;&lt;p&gt;This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear&lt;/p&gt;&lt;/div&gt;
  
  &lt;div id="wrapper"&gt;
  
      &lt;div id="bar"&gt;
          &lt;div class="frame clearfix"&gt;
              &lt;div class="bar-text"&gt;&lt;p&gt;{call:text}&lt;/p&gt;&lt;/div&gt;
              &lt;div id="search-button"&gt;&lt;i class="af-search"&gt;&lt;/i&gt;&lt;/div&gt;
              &lt;div class="social-frame"&gt;{social}&lt;/div&gt;                
              &lt;div class="search-bar"&gt;{search}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  
      &lt;header id="header"&gt;
          &lt;div class="navContainer clearfix"&gt;
              &lt;div class="logo med-padding"&gt;{logo}&lt;/div&gt;
              &lt;nav&gt;&lt;div id="navigation"&gt;{menu}&lt;/div&gt;&lt;/nav&gt;  
          &lt;/div&gt;
          &lt;div class="sliderContainer"&gt;               
              &lt;div id="tall-header-image" class="wsite-header"&gt;&lt;/div&gt; 
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;div id="main" role="main"&gt;
          &lt;div class="frame"&gt;
              &lt;div class="content large-padding"&gt;{content}&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;footer&gt;
          &lt;div id="footer" class="large-padding clearfix"&gt;
              &lt;div class="frame"&gt;
                  &lt;div class="note" style="text-align: center;"&gt;&lt;p&gt;Drag &amp;amp; drop footer content here&lt;/p&gt;&lt;/div&gt;
                  &lt;div id="footer-content" class="med-padding"&gt;{bottom:content}    &lt;/div&gt;                 
                  &lt;div id="footer-content" class="med-padding"     style="display:none;"&gt;{footer}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="footer-bottom" class="feature small-padding"&gt;
              &lt;div class="frame"&gt;
                  &lt;div class="copyright"&gt;&lt;p&gt;{copyright:text}&lt;/p&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript" src="/files/theme/basic-header.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;                               
  </code></pre>