My HTML and CSS nav bar is not working on IPhones - html

Question

So I have been coding a website with some friends for our robotics team and have run into a problem with our nav bar. It works well for any PC/laptop/mac books and Android devicesWorking nav bar on Android phone but on all iPhones the nav bar is stretched Screen shot of the stretched nav bar. Here is the CSS and HTML code that we have `
body {
background-color: rgb(90, 88, 88);
margin: 0;
padding: 0;
user-select: none;
}
#img {
width: 5.6%;
height: 100%;
}
#topBar {
position: fixed;
list-style-type: none;
width: 100%;
height: 10%;
display: inline-block;
overflow: hidden;
background-color: #333;
z-index: 999;
}
.topbar-section {
color: white;
text-align: center;
padding: 1.5rem .5rem;
display: inline-block;
font-family: "Helvetica ", sans-serif;
font-weight: 100;
width: 10vw;
height: 100%;
}
#h {
color: rgb(253, 253, 253);
font-family: "Helvetica ", sans-serif;
text-decoration: none;
font-weight: 100;
font-size: 100%;
}
#heo {
display: inline-block;
text-align: center;
padding: 1.6rem 0.6%;
}
.tabs {
font-size: 100%;
font-weight: 100;
}
.topbar-section:hover {
background-color: #111;
}
.Toggle {
position: absolute;
top: 2.1rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.Toggle .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#con {
margin-right: 10px;
float: right;
margin: 0;
padding: 0;
}
.active {
display: block;
}
#media(max-width: 1050px) {
.Toggle {
position: absolute;
top: 4vh;
right: 1rem;
}
.Toggle {
display: flex;
}
#img {
width: 8%;
}
#topbar {
height: auto;
}
.topbar-section {
display: block;
}
.topbar-section {
width: 100%;
padding: .7rem;
}
#con {
text-align: center;
width: 100%;
margin-right: 0;
}
.active {
display: none;
}
.HomeTexpandlogo {
display: block;
width: 10%;
height: 10%;
}
#h {
font-size: 80%;
}
}
#media(max-width: 450px) {
#h {
font-size: 60%;
}
}
<div id="topBar">
<img id="img" src="images/txpand_logo-removebg-preview.png">
<div id="heo">
<h1 id="h">Expanding STEM skills through robotics</h1>
</div>
<a href="#" class="Toggle" id="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div id="con" class="active">
<div class="topbar-section" id="homeTab">
<span class="tabs">Home</span>
</div>
<div class="topbar-section" id="aboutUsTab">
<span class="tabs">About us</span>
</div>
<div class="topbar-section" id="outreachTab">
<span class="tabs">Outreach</span>
</div>
<div class="topbar-section" id="pastRobotsTab">
<span class="tabs">Past Robots</span>
</div>
<div class="topbar-section" id="sponsorshipsTab">
<span class="tabs">Sponsorships</span>
</div>
<div class="topbar-section" id="donationsTab" style="display:none;">
<span class="tabs">Donations</span>
</div>
</div>
</div>
Has anyone else run in to this problem and know how to fix it?
Thanks for the help in advance.