Trying to remove extra space when using a tablet size screen

Question

I just finished another front end website. I learned how to access the twitch api this time and I learned a lot. But I am still struggling with how bootstrap works. I figure the problem is has to do with how I am using the grid system.

The site looks great on a medium size screen and large screen. It even works well on phone size screens. But a tablet size, there is a lot of white space on the left side of the application(purple space), I can't figure out how to fix it, any tips? Thanks! http://codepen.io/freefora11/full/GodeRM/

<div class="container">
  <div class="twitch">
    <h1 class="text-center"> Twitch API App</h1>
  </div>
  <div class="col-md-3 col-md-offset-1 col-xs-3 col-xs-offset-1 buttons">
    <div class="col-md-6 col-xs-6 show">
      <p>All</p>
      <p style="color:#A2FE1F">Online</p>
      <p style="color:#DA2E3E">Offline</p>
    </div>
    <div class="col-md-6 col-xs-6 but">
      <button type="button" class="btn btn-sm btn-default" id="all">show</button>
      <button type="button" class="btn btn-sm btn-success" id="on">show</button>
      <button type="button" class="btn btn-sm btn-danger" id="off">show</button>
    </div>
  </div>
  <div class="content col-md-3 col-xs-1">

  </div>


</div>
</div>
</div>

Answer 1

Actually the entire grid structure you used here is incorrect. I have provided the correct structure below before which I will give some tips to make it better.

1) It is always advised to wrap all the .col- classes inside class="row".

2) In .col-md-x, the addition of the x values for a particular device(lg/md/sm/xs) should be 12 by default. In your case the outer .col-md- is adding upto only 6. class="col-md-3" + class="col-md-3". I have provided the updated structure below.

3) Remove the col-md-offset-1 and col-xs-offset-1.

4) Remove the margin-left: 200px; from the class buttons in your styles.

<div class="container">
  <div class="twitch">
    <h1 class="text-center"> Twitch API App</h1>
  </div>
  <div class="row">
  <div class="col-md-2 col-lg-2"></div>
  <div class="col-md-2 col-lg-2 col-sm-3 buttons">
    <div class="col-md-6 col-xs-6 show">
      <p>All</p>
      <p style="color:#A2FE1F">Online</p>
      <p style="color:#DA2E3E">Offline</p>
    </div>
    <div class="col-md-6 col-xs-6 but">
      <button type="button" class="btn btn-sm btn-default" id="all">show</button>
      <button type="button" class="btn btn-sm btn-success" id="on">show</button>
      <button type="button" class="btn btn-sm btn-danger" id="off">show</button>
    </div>
  </div>
  <div class="content col-md-6 col-lg-6 col-sm-6">
     <!--The details content comes here-->
  </div>
  <div class="col-md-2 col-lg-2 col-sm-2"></div>
  </div>
</div>

Please note this is made responsive only till the tablet/small devices as you wanted. For mobile devices you need to add and adjust all the -xs- classes the way you want.