如何修复导航栏上的重叠图像？

问：

使用 Bootstrap 时，当将屏幕缩小到手机屏幕时，我的图像与我的导航栏重叠。我放了一张截图

在此处输入图像描述

我希望在将屏幕缩小到手机屏幕时图像不会重叠

这是我的html和CSS代码，如果你们能帮我修复它。谢谢

<div class="container-all"\>

    <nav class="navbar navbar-expand-lg  py-4" style="background: #D3E0EA;">
        <div class="container-fluid">
            <a class="navbar-brand"href="#">
                <!--------Logo image------->
                <img class="logo"src="images/Pona.png">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent" >
    
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page"href="#">Accueil</a>
                    </li>
    
                    <li class="nav-item">
                        <a class="nav-link"  href="#">Louer</a>
                    </li>
    
                    <li class="nav-item">
                        <a class=" nav-link" href="#">Contacts</a>
                    </li>
                </ul>
    
                <form class="d-flex" role="search">
                    <input class="form-control me-2" type="search" placeholder="search"
                    aria-label="search">
                    <button class="btn btn-outline-success" type="submit">search</button>
                </form>
    
    
            </div>
    
        </div>
    
    
    </nav>

<section id="containing"\>

        <!-----------bg image--------->
    
    <div class="bg_image">
    
        <img class="bg-img"src="images/Test6.png">
    </div>
    
        <!-----------bg pc--------->
    <div class="bg_pc">
    
        <img class="bg-pc"src="images/Computer.png">
    
    
    </div>

</section>

</div>

.bg-img {
    width: 100%;
}
/*****bg pc container****/

.bg_pc {
    position: absolute;
    top:150px;
    max-width: 70%;
    left:20%; 
    overflow: hidden;
    z-index: 3;
    
}

.bg-pc {
    width: 100%;
}