title: Why does my tab container box exceed my main div?
body: <p>I really need your help with this. I have been at this for a few hours to no avail. So I am taking to the interwebs of gurus and experts.</p>
  
  <p>Why does my .tab_container div exceed my main div on the right? How do you remedy this problem?</p>
  
  <p>Here's a picture of the problem:
  <a href="https://i.stack.imgur.com/dokAI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dokAI.png" alt="enter image description here"></a></p>
  
  <p>Here's a picture of the desired result:
  <a href="https://i.stack.imgur.com/13EYQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/13EYQ.png" alt="enter image description here"></a></p>
  
  <p>Here is the HTML and CSS Markup in question:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;style type="text/css"&gt;
  
  ul.tabs {
      margin: 0;
      padding: 0;
      float: left;
      list-style: none;
      height: 32px;
      border-bottom: 1px solid #999;
      border-left: 1px solid rgb(109,109,109);
      width: 100%;
      display: flex;
      position: relative;
  }
  ul.tabs li {
      float: left;
      margin: 0;
      padding: 0;
      height: 31px;
      line-height: 31px;
      border: 1px solid rgb(109,109,109);
      border-left: none;
      margin-bottom: -1px;
      background: #e0e0e0;
      overflow: hidden;
  }
  ul.tabs li a {
      text-decoration: none;
      color: #000;
      display: block;
      font-size: 8pt;
      padding: 0 20px;
      border: 1px solid #fff;
      outline: none;
  }
  ul.tabs li a:hover {
      background: #ccc;
  }   
  html ul.tabs li.active, html ul.tabs li.active a:hover  {
      background: #fff;
      border-bottom: 1px solid #fff;
      font-weight: bold;
  }
  .tab_container {
      border: 1px solid green;
      border-top: none;
      clear: both;
      float: left; 
      width: 100%;
      background: #fff;
      width: 100%;
      height: 500px;
      padding: 3px;
  }
  .tab_wrapper {
      background: rgb(231,231,226);
      height: 100%;
  }
  .tab_content {
      padding: 10px;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="table-container"&gt;
  
      &lt;div id="container"&gt;
  
          &lt;div id="main" style="display: inline-block; border:1px solid red; width: 983px;"&gt;
  
              &lt;ul class="tabs"&gt;
                  &lt;li&gt;&lt;a href="#tab1"&gt;XAL-2017-482336&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#tab2"&gt;A-2017-00471&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div class="tab_container"&gt;
  
                  &lt;div class="tab_wrapper"&gt;&lt;/div&gt;
  
              &lt;/div&gt;
  
  
          &lt;/div&gt;&lt;!-- END DIV main --&gt;         
  
      &lt;/div&gt;&lt;!-- END DIV container --&gt;
  
  &lt;/div&gt;&lt;!-- END DIV table-container --&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>