How to fix height offset in w3.css list items - html

Question

For each div in my list, the hight is about one line lower. See the problem here: https://weather-software.com/weather-websites.html
I have tried different style tags and starting from scratch.
<!-- First Grid -->
<div class="w3-container w3-row-padding">
<input class="w3-input w3-border w3-padding" type="text" placeholder="Search for website names here..." id="myInput" onkeyup="myFunction()">
<ul class="w3-ul w3-margin-top" id="myUL">
<li>
<a href="https://weather.gov">
<div class="w3-third w3-col w3-container">
<img src="background_1.png" alt="Norway" style="width:100%" class="w3-hover-opacity">
<div class="w3-container w3-white">
<p><b>NOAA NWS Weather.gov</b></p>
<p>The NWS Mission: Provide weather, water, and climate data, forecasts and warnings
for the protection of life and property and enhancement of the national economy.</p>
</div>
</div>
</a>
</li>
<!--The list element is repeated three times-->
</ul>
</div>
I expect all the elements to be level. Instead, they step one line lower for each div.

Answer 1

The "problem" is here:
.w3-ul li {
padding: 8px 16px;
border-bottom: 1px solid #ddd;
}
Take a look at example of W3.CSS, you will see the idea behind this (and isn't what you want).
I guess you must try with something like the example of W3.CSS Grid:
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
Saludos!,