どんな場面で何が起きた？

ウェブサイトのヘッダー作成時、

• display: flex;
• justify-content: space-between;

を使って、タイトルとナビメニューを両端に配置していた。

なぜかbootstrapのGridレイアウトを適用したらナビメニューが真ん中にきてしまった・・・

結論

親要素のheaderにclearfixをするため:after擬似要素をつけていた。

flex使いたいところの親要素に擬似要素を使うとflexboxがうまく働かないらしい・・・。