ページ内のボタン位置を修正したい

前提・実現したいこと

ページの４つのボタンが少し右にずれ込んでしまっています。
これをちゃんと真ん中あたりに収まるように動かしたいです

発生している問題・エラーメッセージ

右より左側の間隔があいてしまっています。

該当のソースコード

<div id="wrapper"><input id="tab-1" name="switch" type="radio" />
<input id="tab-2" name="switch" type="radio" />
<input id="tab-3" name="switch" type="radio" />
<input id="tab-4" name="switch" type="radio" />
<input id="tab-5" name="switch" type="radio" />
<ul class="tabBtn">
     <li><label for="tab-1">基本情報</label></li>
     <li><label for="tab-2">PR</label></li>
     <li><label for="tab-3">保証条件</label></li>
     <li><label for="tab-4">採用条件</label></li>
</ul>
<div class="tabContents"><section><figure><figcaption>
<table style="height: 220px; border-color: #ffaf03; background-color: #fffce0;" border="2">
<tbody>
<tr style="height: 25px;">
<td style="height: 25px; text-align: center;">店舗名</td>
<td style="width: 308.1139831542969px; height: 25px;"></td>
</tr>
<tr style="height: 23px;">
<td style="width: 159.88601684570313px; text-align: center; height: 23px;">到着駅</td>
<td style="width: 308.1139831542969px; height: 23px;"></td>
</tr>
<tr style="height: 23px;">
<td style="width: 159.88601684570313px; text-align: center; height: 23px;">営業時間</td>
<td style="width: 308.1139831542969px; height: 23px;"></td>
</tr>
</tbody>
</table>
</section></div>

/* :::::: button :::::: */

.tabBtn {
  display: table;
  width: 100%;
  margin: 0 0 1px;
  padding: 0;
}

.tabBtn li {
  display: table-cell;
  width: 20%;
  border-right: 1px solid #fff;
  background-color: #20b2aa;
  text-align: center;
  vertical-align: middle;
}

.tabBtn li:last-child {
  border-right: 0;
}

.tabBtn li label {
  display: block;
  cursor: pointer;
  padding: 10px 0;
  color: #fff;
  transition: background-color .3s;
}

.tabBtn li label:hover {
  background-color: rgba(205,92,92,.5);
}

/* :::::: contents :::::: */

.tabContents {
  position: relative;
}

.tabContents section {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  padding: 20px;
  background-color: #fff;
}

.tabContents figure {
  overflow: hidden;
}

.tabContents figure img {
  float: left;
  max-width: 50%;
  margin-right: 20px;
}

.tabContents figcaption {
  font-size: 12px;
  line-height: 1.8;
}

試したこと

こちらのサイトのコードを参考にしました。
余白であるpaddingなどをいじったのですが、うまくいきません。

補足情報(言語/FW/ツール等のバージョンなど)

wordpress4.7
テーマ：chocolate