display:flex;を指定した際に生じる余計な幅を消したい

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
display:flex;を指定した際にflex: 0 0 33.333333%;が勝手に指定されて余計な幅ができてしまうのでしまうのでそれを消したい

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

![イメージ説明](985a9efb8003227047faf734f3ccbf71.png)

該当のソースコード

@media (min-width: 768px)
.col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}

試したこと

flexboxなどについて調べたが出てこなかった

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

HTML、cssを一通り提示してください。コピペで再現できる情報です。
あと御覧の通り、code内だと他のマークダウンの機能は使えません（今回だと画像のところ）
想定通りになっているかプレビューで確認してください。
あと「調べたけど出てこなかった」では情報量ゼロです。
何をどう調べて何を確認して何を試したのか　具体的に記載してください。

Answer 1

flex: 0 0 33.333333%;を打ち消したい、ということなら、普通に上書きすればいいのでは。

@media (min-width: 768px)
.col-md-4 {
    flex: 0 1 auto;
}

ただ、ほかの部分にも影響が出そうな気がしますが。

---

これ、Bootstrapだと思いますが、グリッドシステムは幅を12分割したグリッドでレイアウトしますので、幅が広がってしまうのは仕様です。

それが気に入らないならば、下手にCSSを追加してアドホックに対応するよりも

• グリッドシステムを使わない
• グリッドの中に別の要素を入れ子にする

のどちらかで対応する方が筋がいいと思います。