Bootstrap でスマートフォンサイトの幅が少しだけ広くなってしまう現象

Bootstrap を使用していて、何故か以下の画像のように、スマートフォンサイトで幅が画面よりも少しだけ広くなってちょっとだけ横スクロールできてしまう現象が発生しました。

どうやら form-group と container を組み合わせると発生するようです。

<div class="container">
  <div class="row">
    <form action="#" class="form-horizontal">
      <div class="form-group container"><!-- ここが問題 -->
        <label for="input-name" class="col-sm-2 control-label">おなまえ</label>
        <div class="col-xs-12 col-sm-8">
          <input type="text" class="form-control" id="input-name" placeholder="おなまえ" maxlength="80" required="required">
        </div>
      </div>

これを以下のように、form-group と container を div タグで入れ子にすることで回避することができました。

<div class="container">
  <div class="row">
    <form action="#" class="form-horizontal">
      <div class="container"><!-- container と -->
        <div class="form-group"><!-- form-group を分ける -->
          <label for="input-name" class="col-sm-2 control-label">おなまえ</label>
          <div class="col-xs-12 col-sm-8">
            <input type="text" class="form-control" id="input-name" placeholder="おなまえ" maxlength="80" required="required">
          </div>
        </div>
      </div>