Bootstrap3のスマホ表示時の余白を狭くする

Bootstrap3のgrid systemを使用すると, レスポンシブデザインが容易に実現できるのだが, 画面の横幅が768px未満のとき(スマホ用表示のときに)画面横の余白が大きく感じるのが玉に瑕.

それを是正するには, 以下のようにすればOK.

@media (max-width: 767px) {
  .container  {
    padding: 3px !important; /* 好みに応じて余白サイズを指定 */
    overflow-x: hidden !important; /* これがないと x軸方向に謎の余白が生じてしまう */
  }

  .navbar-header {
    margin: 0px  !important;
  }
}