Hello, and thank you very much for your time! 
Basically, learning Flexbox has led to a ton of sanity issues for me. Right now, I’m experiencing 2 unexpected visual issues that I need to know how to fix.
1)
(Hope you can see that img)
Likely in some way due to the size of the text fields, 2/4 of the imgs have shifted upward.
HTML:
<!-- TEAM SECTION -->
<section id="team-container" class="main-div">
<h2>Our Team</h2>
<div id="team-imgs-container">
<div class="team-img-container">
<img src="./Resources/Images/staffphoto1.avif" >
<h3>Tyler</h3>
<h4 class="about-team-header">-About Me-</h4>
<p class="about-team">Tyler is the coding maestro of our team, turning complex algorithms into elegant solutions.
With a passion for innovation, he's always on the lookout for the next big tech breakthrough.
Outside the coding realm, you'll find him scaling mountains or immersed in a sci-fi novel.</p>
</div>
<div class="team-img-container">
<img src="./Resources/Images/staffphoto2.avif" >
<h3>Seris</h3>
<h4 class="about-team-header">-About Me-</h4>
<p class="about-team">Seris is the artistic visionary behind our brand. From captivating visuals to user-friendly interfaces,
she brings a touch of magic to every project. An avid traveler and foodie, Seris combines her love for design with a taste for adventure,
creating a vibrant and dynamic workplace.</p>
</div>
<div class="team-img-container">
<img src="./Resources/Images/staffphoto3.avif" >
<h3>Sylo</h3>
<h4 class="about-team-header">-About Me-</h4>
<p class="about-team">Sylo is our marketing maestro, turning ideas into impactful campaigns. With a knack for storytelling,
he weaves compelling narratives that resonate with our audience. Outside the office, Sylo's a fitness enthusiast and a connoisseur of all things coffee –
he believes good ideas start with a great brew.</p>
</div>
<div class="team-img-container">
<img src="./Resources/Images/staffphoto4.avif" >
<h3>Mavis</h3>
<h4 class="about-team-header">-About Me-</h4>
<p class="about-team">Mavis is the heartbeat of our workplace, ensuring a positive and inclusive culture. With an ear always tuned to the team's needs,
she fosters a sense of belonging and camaraderie. Beyond the office walls, Mavis is a volunteer extraordinaire,
contributing to local causes and spreading smiles wherever she goes</p>
</div>
</div>
</section>
CSS:
#team-imgs-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
gap: 20px 0;
padding: 20px 0;
z-index: 2;
}
.team-img-container {
width: 25%;
}
.team-img-container img {
height: 20vw;
width: 75%;
object-fit: cover;
}
.team-img-container p {
padding-top: 10px;
}
2) When I hover over the navigation links, I set it up so that the text would bold. However, this causes an undesirable scaling of the entire ul.
HTML:
<!-- HEADER -->
<header class="nav-bar">
<!-- ICON / TITLE -->
<section id="iconandtitle">
<div id="icon-container">
<a href="#"><img id="icon" src="./Resources/Images/favicon.ico" alt="Company Icon"></a>
</div>
<div id="title-container">
<h1 id="page-title">VLC Enterprises</h1>
</div>
</section>
<!-- NAV -->
<nav id="home-nav" class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Other</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
CSS:
.nav-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: rgb(0, 90, 120);
width: 100%;
position: sticky;
top: 0;
z-index: 1;
}
#icon {
height: 50px;
cursor: pointer;
}
#icon:hover {
height: 70px;
transition: height 2s;
}
#iconandtitle {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
z-index: 2;
}
#icon {
padding-left: 20px;
}
.title-container {
padding: 0 20px;
}
#page-title {
margin: auto;
height: 100%;
}
.nav ul {
height: 100%;
display: flex;
flex-direction: row;
background-color: rgb(40, 110, 150);
margin: auto 0;
border-radius: 10px 0 0 0;
z-index: 2;
}
.nav ul li {
list-style-type: none;
margin: auto 1.5em;
font-weight: 500;
}
THANK YOU AGAIN FOR YOUR TIME! If you notice any poor practices/misunderstandings of functionality/anything else to provide feedback on while you’re diving into my code, I’d love to hear it!