子テーマのstyle.cssに以下のような記述で隙間が消えるのではないかと思います。

#header .site-name-text {
  display: block;
}

私のページを見て色々試行錯誤したんだと思います。

https://bibabosi-rizumu.com/cocoon-header-logo-each-page/

色々触っている内、CSSがグチャグチャになって困ってからの質問のようなので、独自カスタマイズの修正。って感じだから、スレ主さん以外は参考にならないと思います。

ご自身の以下、カスタマイズ

@media screen and (max-width: 480px) {
	/* 元のロゴ画像を非表示 */
	.logo > a img {
		visibility: hidden;
	}
	/* ページ毎にロゴ画像を指定 */
	.logo > a .site-name-text {
		display: inline-block;
		background: url("https://www.suido-support.com/osaka/wp-content/uploads/2019/07/sp-top.png") no-repeat;
	    background-size: contain;
	}
}
@media screen and (max-width: 480px){
	.logo img {
		height: 250px !important; /* スマホ時のロゴの画像タテサイズ */
		margin: 0em auto;
	}
}

このあたりのCSSは全て不要で、ご自身のカスタマイズされた部分を削除してください。

他に不要箇所が色々ありますけど、割愛しますね。

*****

それから以下CSSを適応。その完成イメージ図

https://gyazo.com/33a6a59521db4de0acc9e967f9724300

画像サイズによって高さを調整してください。

@media screen and (max-width: 480px) {
	.logo-image {
		padding: 0;
	}
	/* 元のロゴ画像を非表示 */
	.logo > a img {
		visibility: hidden;
	}
	/* ページ毎にロゴ画像を指定 */
	.logo > a .site-name-text {
		display: inline-block;
		background: url( https://www.suido-support.com/osaka/wp-content/uploads/2019/07/sp-top.png ) no-repeat #fef5ea;
		background-size: contain;
		background-position: center;
	}
	.logo img {
		max-width: 100%;
		height: 23vh; /* スマホ時のロゴの画像タテサイズ */
	}
}

>私のページを見て色々試行錯誤したんだと思います。

はい、いつも参考にさせてもらっております（ありがとうございます）

教えていただいたCSSに変更してみましたが、変わらず・・・

もしかしたらこちらのイメージがうまく伝わっていないのかと思ったので、再度イメージ図を添付いたします。

添付のとおり、TOPの画像とナビゲーションの隙間が完全にない状態を目指したいと思っております。

CSSが反映されてないようですよ。

@media screen and (max-width: 480px) {
	/* 元のロゴ画像を非表示 */
	.logo > a img {
		visibility: hidden;
	}
	/* ページ毎にロゴ画像を指定 */
	.logo > a .site-name-text {
		display: inline-block;
		background: url("https://www.suido-support.com/osaka/wp-content/uploads/2019/07/sp-top.png") no-repeat;
	    background-size: contain;
	}
}
@media screen and (max-width: 480px){
	.logo img {
		height: 250px !important; /* スマホ時のロゴの画像タテサイズ */
		margin: 0em auto;
	}
}

これ不要と書いた分です。

なんらかのキャッシュが残っているかと思われます。サーバーのキャッシュが関連しているのか、プラグインが関連んしているのか。かなっと。

あと、今見たらCSSの一部が変なので、再度チェックしてみますね。

***********

CSSが貼れない。。っていう不具合が。

修正点のみ書きますね。

​height: 23vh;

これを　​​​​​

 height: 59vw; 

くらいにして後は微調整して余白を潰してくださいね

https://gyazo.com/9f5da9f17df02f51df642c2bab14d9df

480px位

320px位

https://gyazo.com/efa84e9ea6b4c22d90041387e4d1528a

微妙な余白が気になる場合、メディアクエリで調整するのも良いと思います❦

キャッシュを削除してからご確認くださいね。

@media screen and (max-width: 480px) {
	/* ページ毎にロゴ画像を指定 */
	.logo > a .site-name-text {
		background: url( https://www.suido-support.com/osaka/wp-content/uploads/2019/07/sp-top.png ) no-repeat #fef5ea;
		background-size: contain;
		background-position: center;
	}
	.logo img {
		visibility: hidden;
		max-width: 100%;
		height: 59vw; /* スマホ時のロゴの画像タテサイズ */
	}
}

上記を追記。トピック主さんが書いているCSSもあったので、スッキリさせました。

かうたっく様

ありがとうございました。

お教えいただいたCSSで無事にイメージ通りにすることができました！

今後とも宜しくお願い致します。