タイトル下のシェアアイコン

原因で言うと、
iphone5で、class=”snsb clearfix snsbs” の幅が300pxで、この子要素のliの横幅が37px+7px(margin)で42pxですから、7つ入る計算なのですがliの子要素のaに対してbox-sizingが入っていないので、わずかに線幅も計算とかして6つで折り返しているんだろうと言うふうに思います。

なので、解決策はいくつかありますが、

・シェアアイコンが入っているulの幅を取る。ネガティブマージンを入れたり色々
・ul.snsbs li a に対して、box-sizing:border-box;を入れ、width,height共に35pxにする
・#sns-group-top li あたりの margin-right:7px; を 5pxにする
・jQuery等で端末の画面幅を出して最適なマージンを算出する
・flexboxでcssを作り直す

これらがパッと思いついた解決策です。上記上から3つは端末の画面サイズによってアイコンが並ぶ数が変わるだろうと思います。
jQueryで画面幅から最適なマージンを算出すると言うのは一番思い通りでにできる方法ですが、やや面倒臭い。
簡単なのはflexboxでアイコンの間隔をブラウザが自動計算すると言うのが応用も聞いて最も良いと思います。ただし、flexbox等は対応していない端末があるため、そのあたりをどうするかが問題でしょうか。現状でモダンブラウザはたいていイケルはずですがIEが問題となる可能性が高いです。
スマホはandroidかiosだろうと思うので、ベンダープレフィックスをつければたいていイケルはずです。
仮に、6つしか並ばなくてもあるいは7つ、8つと並んだとしてもflexboxであればスペースは等間隔になります。つまりmargin-rightで開けているスペースはいらなくなるということです。

#sns-group-top ul {
  padding: 0;
  /* line-height: 20px; */
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  height: auto;
}

#sns-group-top li {
  /* margin-right: 5px; */
  min-width: 40px;
  max-width: 60px;
  flex: 0 14%; /* 14%は li の幅です良い感じのスペースに調整して下さい */
}

ul.snsbs li a {
  color: #fff;
  text-decoration: none;
  font-size: 25px;
  background-color: #000;
  display: block;
  padding: 7px 6px 3px 6px;
  border-radius: 5px;
  width: 25px;
  height: 30px;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

ul.snsbs li {
  /* padding-right: 0; */
}

ul.snsbs li {
  /* margin-right: 5px; */
  margin-bottom: 5px;
}

.snsb li {
  /* float: left; */
  list-style-type: none;
  /* margin-right: 7px; */
}

こんな感じです。(いくつか抜けているかも)。ベンダープレフィックスをお忘れなく。

最も簡単なのは「#sns-group-top li あたりの margin-right:7px; を 5pxにする」だろうと思います。

またもや投稿してから気がついた(滝汗

応用も聞いて最も良いと思います ☓
応用も効いて最も良いと思います ◯

本当は、flex: 0 14%;よりも、 flex:1; と言うのがflexboxらしいと言えばそうなのですが、できるだけオリジナル通りに再現できるような配慮でこうなってます。
また1から設計しなおせば、バイラルにするのもmedia-queryに対して僅かな変更で済みます。
幅の狭い端末では、 flex-flow: column wrap;にして、flex:1 50%(横2列)とかもボタンの押し間違い等がなくなる良い方法かも知れません。

参考:
flexplorer
CSS flexible box の利用

もうひとつ参考までに

#sns-group-top ul {
  padding: 0;
  /* line-height: 20px; */
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  height: auto;
}

#sns-group-top li {
  /* margin-right: 5px; */
  /* min-width: 40px; */
  /* max-width: 60px; */
  flex: 1 auto;
}

これもお試し下さい。

今現在、うちのサイト(blazechariot)もflexboxで実験的にcssを修正しています。

firefoxで難があり、直そうとしていた所、レンタルサーバーの何かしらのトラブル(最長1週間ぐらいかかるらしい(笑)で、現在更新ができない状態なので中途半端なことになっていますが、いくつかflexboxの記事も書いたので何かの参考になれば。
色々やり過ぎてて参考にならない部分が多いですけれども（笑）

こっそりとわかりやすいページを追加しておきます。

Flexbox Layout