html/cssでdivが重なってしまう問題。

Question

制作しているサイトでdiv要素が重なってしまって後筆の要素が隠れてしまっております。
cssがまだまだ不案内で初心者のような質問なのですが、お尋ねさせていただきたく存じます。

前提・実現したいこと

レスポンシブデザインの時にロゴとメニューバーを重ねないで表示をさせたい。

該当のソースコード

html
 <!-- header -->
    <header>
        <div class="logo"><img src="./img/logo.png" alt="ChiePro"></div>
        <div class="layout_nav">
        <nav class="global_nav">
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">PRODUCT</a></li>
                <li><a href="#">WORKS</a></li>
                <li><a href="#">COMPANY</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>
        </div>
    </header>

/* header css */
header{
    width: 100vw;
    height: 10vh;
}
---省略---

/* navi css */
.layout_nav{
    width: 80%;
    height: 100%;
    float: right;
    display: table;
}

.global_nav  {
    float: right;
}

.global_nav ul li{
    border-left: solid .1vh rgba(199, 36, 36, 1);
    float: left;
 }

 .global_nav ul li :hover{
     background-color: rgba(224, 224, 224, .7);
 }
 
.global_nav ul li a{
    font-size: 1.2vw;
    color: #5e5e5eef;
    text-decoration: none;
}
以下省略

/* logo css */

.logo{
    width: 20%;
    height: 100%;
    float:left;
}

.logo img{
    height: 100%;
}

試したこと

positionやdisplay:tableなどを使用を試みましたが、両者うまくいかずに苦戦しております。

補足情報（FW/ツールのバージョンなど）

確認した環境です。　OS：win10（64bit）　デバイス：PC　ブラウザ：Chrome（67.0.3396.99)

簡単なご説明になりましたが、どうぞよろしくお願いします。

Comments

[yoshinavi]

ご提示のコードでは症状が再現できませんでした。 症状が確認出来るコード、および、OSやブラウザ（バージョン含む）確認されたデバイス等の環境も提示されると、より良い回答を得れると思います。　※確認した環境です。　OS：win7（32bit）　デバイス：PC　ブラウザ：Chrome（67.0.3396.99）　Firefox（61.0）

[Abenosan]

アドバイスありがとうございます。

[yoshinavi]

ロゴ画像の「logo.png」が原因かも知れないので、サイズ提示してください。

[kei344]

logo.pngのサイズはどうなっていますか？ex) 横300px 縦100px

[Abenosan]

みなさまありがとうございます。対処法といたしまして、ハンバーグメニューにしたいと思います。

[kei344]

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。

[yoshinavi]

「解決」であれば、自己回答で良いので、「回答→ベストアンサー」として質問を終了してください。

Answer 1

もしかしたらですが、.logo自体は20%の幅を保っているけど、.logo img(画像)の幅が.logoからはみ出しているだけなのでは？

なので、理想状態であるかはわからないですが、以下を追加すると解決するかもしれないです。

.logo img{
    width: 100%; //これを追加
    height: 100%;
}

それと試しに以下のことをやってみると.logoと.layout_navが重なっているかわかると思います。

.layout_nav{
    width: 80%;
    height: 100%;
    float: right;
    display: table;
    background: blue; //わかりやすく背景色をつける
    opacity: 0.8; //少し透過して重なりをわかりやすく
}
.logo{
    width: 20%;
    height: 100%;
    float:left;
    background: red; //わかりやすく背景色をつける
    opacity: 0.8; //少し透過して重なりをわかりやすく
}