【CSS】横幅100%の3分割カラムを作成しようとした所ズレ(上下)が生じてしまいました

Question

前提・実現したいこと

CSSでのカラム分割に関する質問です。
親ディビジョン(float_box-wrap)の中に子(col3sp)を3つ並べて3分割のカラムを作成したく思っております。

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

3分割カラムを作成するにあたり[width: calc(100% / 3)]の表記をした所、3カラム目が一段ずれたような表示になってしまいました。

各ブラウザにて同様の表示となっております。
試しに93%÷3にした所段がずれなくなりましたが、94%を超えるとずれが生じるため可能であれば幅100%に近づけた表示をしたくご質問いたします。

以下にCSSを記載しますので過不足などご指摘いただけますと幸甚です。

該当のソースコード

#container div.float_box-wrap{
    overflow: auto;
    margin: 0 auto;
    display: block;
	box-sizing: border-box;
	background-color: #1e9cc0;
	width: 100%;
}

#container div.col3sp{
	background-color: #00b04c;
	width: 33.33%;
	width: -webkit-calc(100% / 3);
	width: calc(100% / 3);
	float: left;
	padding: 0.7em 0.5em;
	margin: 0;
	box-sizing: border-box;
}

Answer 1

float: left;で横並びさせる方法はもう時代遅れなのでやめましょう。今回のようなトラブルや他にもいろいろ厄介です。

CSS Flexboxで横並びなどのレイアウトを決めるのが現代の主流です。

#container div.float_box-wrap{
  overflow: auto;
  margin: 0 auto;
  display: flex; /* 追加 */
  box-sizing: border-box;
  background-color: #1e9cc0;
  width: 100%;
}

#container div.col3sp{
  background-color: #00b04c;
  width: -webkit-calc(100% / 3);
  width: calc(100% / 3);
/*  float: left;  削除 */
  padding: 0.7em 0.5em;
  margin: 0;
  box-sizing: border-box;
}

Comments

[kuzumi]

修正コードまでご教示くださり本当にありがとうございます、お陰様で望んだ表示にいきつく事ができました。
フレックスボックスについてしっかり学んでおくよういたします。
余談中の余談ですがなんだか気恥ずかしいので親(float_box-wrap)のクラス名は変更しようと思います。