Html – My Image and nav bar looks good on laptop but on mobile is way too long. I have spent 3 days trying to tinker but no joy

I have an image as my icon and my navigation links running after it as a header. I would like this "nav bar" to match up with width of the rest of my content on mobile. On laptop looks perfect but on mobile it is so long so have to scroll sideways and some of the boxes containing my link cover the end of my image. I did use meta name="viewport" content="width-device-width, initial-scale=1.0" in my html.

I am using grid for layout. On my cpanel in webhost the grid column properties give a warning that they are unknown properties. Any tips would be greatly appreciated. Thanks!

I expected my "navigation bar" to inlude my image first the followed by my 5 navigation links to appear all on the same line and with the confines of my body grid. This appears good on my laptop but looks terrible on mobile. I have tried to mess about with width and height also added img-fluid and max-width style directly to html tag but does not solve. I also tried adding this first block of code to css but still problem persists.

`
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}`

Here is the relevant html and css code for my site:

`<div class="bodygrid">
<div class="banimg"><img src="./images/minilogo.png" alt="Welcome to Sleeping Giant Web     
Solutions"></div>
<div class="nested1">
<div onmouseover="this.style.background='#093145'; this.style.color='white'"
onmouseout="this.style.background='white'; this.style.color='black'"><a href="index.html"
alt="Home">Home</a></div>
<div onmouseover="this.style.background='#107896'; this.style.color='white'"
onmouseout="this.style.background='white'; this.style.color='black'"><a href="about.html"
alt="About">About</a></div>
<div onmouseover="this.style.background='#829356'; this.style.color='white'" 
onmouseout="this.style.background='white'; this.style.color='black'"><a href="solutions.html"
alt="Solutions">Solutions</a></div>
<div onmouseover="this.style.background='#bca136'; this.style.color='white'"   
onmouseout="this.style.background='white'; this.style.color='black'"><a href="pricing.html"
alt="Pricing">Pricing</a></div>
<div onmouseover="this.style.background='#9a2617'; this.style.color='white'" 
onmouseout="this.style.background='white'; this.style.color='black'"><a href="contact.php" 
alt="Contact">Contact</a></div>
</div>`

       .bodygrid{
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: white;
width: 90%;
align-content: center;
margin-left: auto;
margin-right: auto;
}

.bodygrid > div{
background: white;
}

.banimg{
background-color: white;
display: block;
margin-left: auto;
margin-right: auto;
align-content: center;
width: 80%;
height: 80%;
padding: 5px;
}

.laptopimg{
grid-column: 1/ span 3;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
padding: 5px;
}

.nested1{
display: grid;
background-color: white;
white-space: nowrap;
grid-template-columns: repeat(5,1fr);
grid-column: 2/ span 3;
gap: 1em;
align-content: center;
padding: 1em;
width:95%;
height:95%;
}

.nested1 > div{
border: hsl(0, 0%, 6%) 1px solid;
background-color: white;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: large;
float: left;
padding: 1em;
}

enter image description here