title: css & jquery: opened div expands past screen edges
body: <p>having a bit of trouble here with my navbar. For some reason, which I can't figure out, the box that opens when someone clicks the search button expands past the window edges.</p>
  
  <p>Full example available here: <a href="https://codepen.io/NaughtySquid/pen/MEXGpM" rel="nofollow noreferrer">https://codepen.io/NaughtySquid/pen/MEXGpM</a></p>
  
  <p>Here's the full code, first the HTML:</p>
  
  <pre><code>&lt;nav class="navigation-main"&gt;
    &lt;div class="container group"&gt;
      &lt;div class="right-menu"&gt;
        &lt;div id="search-button" class="toggle-nav search-box"&gt;
          &lt;a href="#"&gt;&lt;img src="http://worldartsme.com/images/search-button-clipart-1.jpg" width="14" height="14" alt="" /&gt;&lt;/a&gt;
          &lt;div class="toggle-content"&gt;
            &lt;form method="get" action="{:url}index.php?module=search"&gt;
              &lt;input type="hidden" name="module" value="search" /&gt; Search &lt;input type="text" class="search-field ays-ignore" name="q" placeholder="Search Articles…" /&gt;
              &lt;input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;" /&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Here's the CSS:</p>
  
  <pre><code>body {
      background: #ffffff;
      color: #404040;
      font-family: 'Ubuntu', sans-serif;
      margin: 47px auto;
      padding: 0px;
      word-wrap: break-word;
  }
  .navigation-main {
           position: fixed;
           top: 0;
           width: 100%;
           height: 49px;
           z-index: 999;
           background-color: #222;
      margin: 0 !important;
  }
   .header-navbar {
           list-style: none;
           padding: 0;
           margin: 0;
   }
   .header-search {
       padding: 9px 0;
      margin-right: 5px;
   }
   .header-search .search-field {
       width: 200px;
       background-color: #333;
       border: 1px solid #5c5c5c;
       outline: none;
       line-height: 19px;
       height: 30px;
       color: #fff;
       margin: 0;
   }
  /* toggle menus */
  .right-menu{float: right; right: 0px;}
  .toggle-content 
  {
      display: none;
      white-space: nowrap;
      position: absolute;
      right: 0;
      background: #222;
      box-shadow: 1px 1px 1px black;
      padding: 5px;
      word-wrap: normal;
      z-index: 999999;
  }
  .toggle-active {display: block;}
  .toggle-content ul 
  {
      list-style: none;
      list-style-type: none;
      margin: 0;
      padding: 0;
      color: #999;
  }
  .toggle-content li 
  {
      margin: 0;
      padding: 0;
  }
  .toggle-content a 
  {
      display: block; 
      color: #999; 
      padding: 5px 
      !important;
  
  }
  .toggle-content a:hover {color: #fff;}
  /* search box */
  .search-box {float: left; color: #999; line-height: 29px; background-color: #383838;}
  .search-box:hover{background-color: #4B4B4B;}
  .search-box a {padding: 10px; height: 29px; display: block; color: #999;}
  .search-box:hover{cursor: pointer;}
  #search-button .toggle-content {width: 100%; border-top: 1px solid black; text-align: center; left: 0px;}
      input, textarea, select {
          background: #fcfcfc;
          border: 1px solid #ddd;
          color: #444444;
          margin-bottom: 7px;
          padding: 7px;
          width: 100%;
          -webkit-box-sizing: border-box;
             -moz-box-sizing: border-box;
                  box-sizing: border-box;
          border-radius: .2em;
      }
  </code></pre>
  
  <p>Finally the JQuery:</p>
  
  <pre><code>$(document).ready(function() {
    $(document).on("click", ".toggle-nav &gt; a", function(event) {
      event.preventDefault();
      event.stopPropagation();
      var $toggle = $(this)
        .closest(".toggle-nav")
        .children(".toggle-content");
      if ($toggle.hasClass("toggle-active")) {
        $($toggle).removeClass("toggle-active");
      } else {
        $(".toggle-content").removeClass("toggle-active");
        $($toggle).addClass("toggle-active");
      }
    });
  
    $(document).click(function(e) {
      if (
        !$(e.target).is("#search-button .toggle-content .search-field") &amp;&amp;
        !$(e.target).is("#search-button .toggle-content")
      ) {
        $(".toggle-content").removeClass("toggle-active");
      }
    });
  });
  </code></pre>
  
  <p>I would really like the content to be perfectly bound by the screen edges.</p>
  
  <p>I've spent the last two days with firefox inspector, toggling things off and adjusting things and I just can't pin down what's pushing it out.</p>