logoとmainMenuを横に並べたい

以下の画像のように、logoとmenuがきちんと真横に並びません。これをきちんと横に並べるにはどうしたらいいですか？(おそらく要素の幅が長すぎて縦に並んでしまっています。)

デベロッパーツールでの確認

html
<!DOCTYPE html>
<html lang="ja">

<head>

<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="20220414.css">
<title>header</title>

</head>

<body>

 <!-- #header -->
<header id="header">
<!-- global navi -->
<div id="gNavi">
  <div class="gNaviBtn">
     <input type="checkbox" id="menu-btn-check">
     <label for="menu-btn-check" class="menu-btn"><span></span><span></span><span></span></label><!--チェックボックス-->
     <div class="logo"><img src="img/black.png" alt="黒"/></div>
     <ul class="mainMenu">
       <!--<li><div class="logo"><img src="img/logo.png" alt="ゲストハウスここたまや"/></div><li>--><!--4/14 liの中に入れてしまった-->
     　<li><div class="mini-logo"><img src="img/black.png" alt="黒"/></div></li>
       <li><a href="/fukuske/">プラン1</a></li>
       <li><a href="/fukuske/#itemList">プラン2</a></li>
       <li><a href="concept.html">プラン3</a></li>
       <li><a href="craftsmanship.html">プラン4</a></li>
       <li><div class="top-button"><a href="history.html"><span>予約する/BOOK HERE</span></a></div></li>
     </ul>
  </div>
</div>

<!-- global navi -->
</header>
<!-- #header -->
<!--ここでメニューを作っている-->


</body>

CSS
<style>

.body{
   font-family: "游ゴシック", "ヒラギノ角ゴ　ProN", "メイリオ", "MS Pゴシック", sans-serif;/*https://willcloud.jp/knowhow/font-family/#font-family*/
   margin: 0;
   padding: 0;
  }
 * {/*ブラウザのすべてのCSSをリセット*/
  margin: 0;
  padding: 0;
 }

#menu-btn-check {
    display: none;
}

@media (min-width: 1025px) {/*PC版*/
#gNavi{
background-color: #E5E5E5; 
}
#gNaviBtn{
/*display: flex;*/
/*justify-content: space-between;*/
display: inline-block;
}
/*---------------------- Global Navi Menu ------------------------*/
/*.mainMenu{
  display: flex;
  justify-content: space-between;
}*/
ul.mainMenu {
/*display: flex;*/
/*align-items: center;*/
/*justify-content: space-between;*/
/*width: 700px;*/
text-align: right;
}
ul.mainMenu li {
display: inline-block;
margin-top: 0px;/*この高さはdisplay-widthによって変化しないので絶対値にした*/
margin-right: 20px;/*要素間の距離を伸ばした*/
}
ul.mainMenu li a {
font-size: 14px;
font-weight: bold;
color: #73683b;
text-decoration: none;
}
ul.mainMenu li span{
color: white;
background-color:#73683b;
padding: 20px 40px;
}
.logo img{
/*display: inline-block;*/
width:300px;
height:auto;
margin-left: 60px;
}
.mini-logo img{
display: none;
}
}

</style>