lightning g3でのBootstrap5の読み込み

lightnigを用いてwordpressでの- リストHP作成の勉強をしています。
初心者の為、場違いな質問でしたらご指摘お願いいたします。

前提・実現したいこと

lightning g3(無料版）に
bootstrap5 accordion
の機能を搭載したい。

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

bootstrap5のスターターテンプレート中に
上記アコーディオンのhtmlを記述し、lightning g3の子テーマ内で動かしたところ
アコーディオンは動作しましたが、
ヘッダーが崩れてしまいました。

そこで、lightningの親テーマのg3フォルダのheader.phpに<?php wp_head(); ?>があったので
子テーマにコピーし、

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

を記述してアップロードしましたが、やはり崩れたままでした。

ヘッダーを崩さずにbootstrap5の機能を使うことは難しいのでしょうか。
もしくは、bootstrap5の読み込み方法が間違っているのでしょうか。

追記

「崩れた」の具体的内容として、
lightning g3　のスターターテンプレートの初期状態で、ヘッダー右上に書くヘッダーナビゲーション（グローバルメニュー？）が横1列に並んでいるのですが
上記の動作によって縦1列に並び変わってしまう。という状態です。
（bootstrap5のアコーディオンメニューと同じ、縦並びに変わってしまいます）

検証ツールで確認したところ

.vk-menu-acc {
    position: relative;
}
.global-nav-list {
    margin: 0 auto;
    padding: 0;
    display: flex;
    list-style: none;
    position: relative;
}

の記述があったのですが、
これがbootstrapを読み込むことによって変わってしまう原因なのでしょうか。

追記２
該当するCSSの記述がどうしても見つけられないので、比較のため、
https://howcang.com/2021/06/05/lightningg3/
さんのサンプルDEMO画面のナビゲーションメニューのリンクをお借りします。
このサンプルDEMO画面の右上にあるヘッダーナビゲーション（TOP、会社概要等）が
TOP
会社概要

のように各ブロックが縦に並んでしまう状況です。

追記3

教えていただいたことを元に、検証ツールでCSSを調べていたところ

.nav {
  margin: 0;
  padding: 0;
}

が、bootstrap5を読み込み後、

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

に上書きされていることに気づきました。
また、
flex-wrap: wrap;を消すか
flex-wrap: nowrap;に書き換えることにより
ヘッダーの崩れが治りました！

教えていただいたお話を自分なりに考えた結果、グローバルナビゲーションのみにflex-wrap: nowrap;を更に上書きすることで
やりたい事ができるのではと考えたのですが
実際に、どの場所にどのように上書きしたらよいのかが
やはり分かりません。
もう少しだけアドバイスを頂戴できないでしょうか。

m.ts10806

2021/08/01 23:03

そもそも元々のCSSとBootstrapの機能がバッティングして「崩れ」が起きている可能性があるように思います。そのあたりはどうでしょう？

sumop

2021/08/02 04:06

bootstrapを読み込むことで、CSSと干渉することがあるのですね。ＣＳＳに関して、関係がありそうな部分を引用して追記しました。見当違いでしたらすみません

m.ts10806

2021/08/02 04:08

基本は後勝ちなので、読み込み順も含めた影響で、同要素に対する指定は上書きされて整合性が取れなくなる可能性があるという意味です。

sumop

2021/08/02 12:05 編集

例えば、 A：lightningのセレクタ（横並びの指定） B：Bootstrapのセレクタ（縦並びの指定） AとBは同じセレクタ名があったとして、 A→Bの順に読み込むため、Bが優先される。みたいな考え方で合っているでしょうかちなみに、 ①https://howcang.com/2021/06/05/lightningg3/ さんのサンプルDEMO画面のナビゲーションメニューと、②Bootstrap5のアコーディオンのページを検証ツールを使って確認していたところ、①には .global-nav-list>li { float: right; } の記述があったのですが、こちらは無関係なのでしょうかの

m.ts10806

2021/08/02 22:51

>A→Bの順に読み込むため、Bが優先される。みたいな考え方で合っているでしょうかはい。ただ上書きされるのは同じセレクタでも同じ指定です。違う指定は引き継がれます。 .a{ font-size:10px; color:red; } .a{ color:yellow; } とあったらfont-sizeは残ります。 paddingとかmarginとか上下左右に指定できるものは結構厄介だった記憶。＞の記述があったのですが、こちらは無関係なのでしょうか予想でしかないですが、上書き部分を吸収するために更に上書きして調整することはあります。

sumop

2021/08/03 03:49

検証ツールで bootstrap5のアコーディオンページと上記DEMOページを検証ツールで比較して、同じセレクタ名がないかどうか確認。あれば、縦（横）を指定する要素を確認し、セレクタ名を変更する等の対応をとればよいということでしょうか？