title: How do I remove the side padding in the following case?
body: <p>I am creating a Single page website creating angular. I am using bootstrap as my CSS agent. I have built this on top of bootstrap's starter template. However, I am facing some issues with side margins. Here's my part code:</p>
  
  <pre><code>&lt;div class="table-responsive"&gt;
      &lt;table style="width: 100%;" class="table" &gt;
          &lt;thead&gt;
              &lt;th style="width: 20%;"&gt;Name&lt;/th&gt;
              &lt;th style="width: 25%;"&gt;Action&lt;/th&gt;
              &lt;th style="width: 55%;"&gt;Description&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody style="text-align: left;"&gt;
              &lt;tr ng-repeat="a in actionlist | orderBy:'sortname'"&gt;
                  &lt;td&gt;&lt;span style="color: blue;"&gt;{{a.name}}&lt;/span&gt;&lt;/td&gt;
                  &lt;td&gt; {{a.actionname}} &lt;/td&gt;
                  &lt;td&gt; {{a.description}} &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>And my extra CSS apart from the usual bootstrap.css is [Please ignore the navbar css]:</p>
  
  <pre><code>body {
    padding-top: 50px;
  }
  
  .starter-template {
    padding: 10px 0px;
    text-align: left;
    width: 100%;
  }
  
  section.container {
    background-color: green !important;
  }
  
  @media only screen and (max-width:768px) {
    section.container {
      width: 100% !important;
      padding: 0;
    }
  }
  
  @media (min-width: 768px) and (max-width: 991px) {
  
      .navbar-collapse.collapse {
          display: none !important;
      }
      .navbar-collapse.collapse.in {
          display: block !important;
      }
      .navbar-header .collapse, .navbar-toggle {
          display:block !important;
      }
      .navbar-header {
          float:none;
      }
  }
  </code></pre>
  
  <p>I have made a makeshift fiddle here: <a href="https://jsfiddle.net/8kkb1hej/" rel="nofollow">https://jsfiddle.net/8kkb1hej/</a> where I have added necessary elements from <code>index.html</code> too to reproduce the problem. I have given a yellow background to the section in question. As you will be able to see in the fiddle, The table is inside the section but it is having padding on left and light. I want it to stretch from end to end in the section (horizontally) i.e. there should be absolutely no space on either right or left of table inside the section. How can I achieve this?</p>