Problem with navigation on tabs

Question

Well I’m trying to do a tab navigation on a page, but I’m having a problem putting it Responsive and it’s not working someone could help?

the code:

ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
	
  border-bottom: 1px solid #d7d7d7;
}
ul.tabs li {
  background: none;
  color: #616161;
  display: inline-block;
  padding: 10px 15px;
	color:#000;
  cursor: pointer;
}
ul.tabs li.current {
  color: #484848;
  border-bottom: 2px solid #F65314;
}
.tab-content{
	color:#000;
}

<section class="loja" class="loja">
      <div class="container cf">
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    	  <script>$(document).ready(function() {
      $('.tab-content').each(function(i) {
        var tabTitle = $(this).data('tab-title');
        var current = $(this).hasClass('current') ? "current" : "";
        var newTab = $('<li class="tab-link"></li>');
        newTab.html(tabTitle)
          .addClass(current)
          .attr('data-tab', $(this).attr('id'));
        $('ul.tabs').append(newTab)
      })

      $(document).on('click', '.tabs li', function() {
        var tab_id = $(this).attr('data-tab');

        $('.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
      });

    })</script>
      <ul class="tabs"></ul>
      
      <div id="tab-1" data-tab-title="Tab 1" class="tab-content current">
        <div role="tabpanel" class="tab-pane active" id="home">
    	  					<div id="_opcoes_main">
       <form target="_blank" action="elos2.php" id="_form" onsubmit="return valEmail()" method="post">
          <input type="hidden" id="_valortt" name="_valortt" />
          <div class="_opcoes_div">
             <em>1.</em> <strong>Escolha a Liga e Divisão atual</strong>
             <br />
             <img id="img/img_ligatual" src="img/img_bronze.png" />
             <br />
             <p>Liga</p>
             <select name="lig_atu" id="lig_atu">
                <option value="bronze">Bronze</option>
                <option value="prata">Prata</option>
                <option value="ouro">Ouro</option>
                <option value="platina">Platina</option>
                <option value="diamante">Diamante</option>
             </select>
             <br />
             <p>Divisão</p>
             <select name="div_atu" id="div_atu">
                <option value="v">V</option>
                <option value="iv">IV</option>
                <option value="iii">III</option>
                <option value="ii">II</option>
                <option value="i">I</option>
             </select>
          </div>
          <div class="_opcoes_div">
             <em>2.</em> <strong>Escolha a Liga e Divisão desejada</strong>
             <br />
             <img id="img/img_ligades" src="img/img_bronze.png" />
             <br />
             <p>Liga</p>

             <select name="lig_des" id="lig_des">
                <option value="bronze">Bronze</option>
                <option value="prata">Prata</option>
                <option value="ouro">Ouro</option>
                <option value="platina">Platina</option>
                <option value="diamante">Diamante</option>
             </select>
             <br />
             <p>Divisão</p>
             <select name="div_des" id="div_des">
                <option value="v">V</option>
                <option value="iv">IV</option>
                <option value="iii">III</option>
                <option value="ii">II</option>
                <option value="i">I</option>
             </select>
          </div>
          <div class="_opcoes_div">
             <em>3.</em> <strong>Escolha a Fila desejada</strong>
             <br />
             <img id="img/img_flex" src="img/img_soloduo.png" />
             <br />
             <p>Fila</p>
             <select name="_fila" id="_fila">
                <option value="solo/duo">Solo/Duo</option>
                <option value="flex">Flex</option>
             </select>
          </div>
          <br clear="all" />
          <div id="_botao">
             <div id="_errmsg" style="display: none;">Opa, você selecionou uma opção invalida!</div>
             <div id="_botao_email" style="display: none;">
                <label>
                   <strong>E-mail</strong>
                   <br />
                   <input onkeyup="$('#_botao #_botao_email label strong').html('E-mail').css('color','#444')" required="required" id="_email" name="_email" type="email" placeholder="Insira seu e-mail" />
                </label>
                <br />
                <button type="submit" id="_botao_valor">
                   <div>
                      R$ 0,00
                   </div>
                   <div>
                      ADQUIRIR
                   </div>
                </button>
             </div>
          </div>
       </form>
       <div id="_modal">
          Obrigado pela compra!
          <span id="_modal_fecha" onclick="$('#_modal').hide()">X</span>
       </div>
      </div>
      <div id="tab-2" data-tab-title="Tab 2" class="tab-content">
        bla bla bla
        <br>bal bal balbla bla bla
        <br>bal bal bal
      </div>
      <div id="tab-3" data-tab-title="Tab 3" class="tab-content">
        bla bla bla 2
        <br>bal bal balbla bla bla
        <br>bal bal bal
      </div>
</section>

photo of how you’re getting :