不具合・カスタマイズ対象ページのURL：

http://54.250.108.244/

お疲れ様です。

ブログ作成が全く初めての初心者です。

現在、会社のホームページを制作しております。
問題点としましては、ヘッダーを半透明化いたしましたところ、ロゴおよびナビゲーションと余白の色に違いが生じてしまったことです。
制作過程において、ヘッダーの色を変更する作業が発生いたしました。当初はヘッダー全体を完全に透明化しておりましたが、その際は色の違いは発生せず、すべて透明化されました。
しかし、その後半透明化に変更したところ、ヘッダーの余白(コンテンツ幅以外の領域)との色違いが発生いたしました。
以下のCSSがヘッダーに適用されているCSSでございます。

/* #header-container 内のナビゲーションメニューのリンクにマウスオーバーしたときの色を変更 */
#header-container a:hover {
background-color: #D9D9D9; /* マウスオーバー時の背景色を変更 */
}

/* ヘッダー全体の半透明化 */
#header {
background-color: rgba(255, 255, 255, 0.5); /* 色と透明度を調整 */
}

/* ナビゲーションメニューの半透明化 */
#navi {
background-color: rgba(255, 255, 255, 0.5); /* 色と透明度を調整 */
}

/* ヘッダーロゴ部分の半透明化 */
#header .site-title,
#header .site-branding {
background-color: rgba(255, 255, 255, 0.5); /* 色と透明度を調整 */
}
/* より具体的なセレクタを使用する例 */
.header-container {
background-color: rgba(255, 255, 255, 0.5) !important; /* 色と透明度を調整 */
}

.nav-container {
background-color: rgba(255, 255, 255, 0.5) !important; /* 色と透明度を調整 */
}

また、そもそも論として、ヘッダーの透明化設定でここまで長いCSSが必要ないとお伺いしましたが、このブログではこの中のいずれかを削除してしまうと、一部、または全体が半透明化されなくなってしまいます。

大変恐縮ですが、説明が不足しているかもしれません。

どうか解決策をご教示いただけますでしょうか。

環境情報：

----------------------------------------------
サイト名：ICTL_HP_検証
サイトURL： http://54.250.108.244 
ホームURL： http://54.250.108.244 
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.6.2
PHPバージョン：8.2.23
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
サーバーソフト：Apache/2.4.62 () PHP/8.2.23
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.8.0
カテゴリー数：9
タグ数：23
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：1087 バイト
functions.phpサイズ：1111 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Contact Form 7 6.0.1
Cool Flipbox 1.8.3
Custom Post Type UI 1.17.2
Fonts Plugin | Use Google Fonts, Adobe Fonts or Upload Fonts 3.8.3
Post Types Order 2.3.3
Search & Filter 1.2.17
Shortcodes Ultimate 7.3.1
SiteGuard WP Plugin 1.7.8
TablePress 3.0.1
----------------------------------------------