Positioning images within grid - html

Question

I'm trying to get the flag icons in the header closer together (I've attached a picture of the relevant section). I've switched around CSS values, but so far no success. I'm using Bootstrap as well.
Here is the relevant code:
.flag {
height: 25px;
width: 25px;
padding: 0px;
}
<nav class="navbar navbar-expand-sm navbar-light bg-light mb-3">
<div class="container">
<a class="navbar-brand" href="#">
<img src="./images/logo/LOGO DARKGLOBE.png" height="100px" width="150px">
</a>
<ul class="navbar-nav align-items-center">
<li class="nav-item">
<a class="nav-link" href="./home.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-toggle=dropdown href="#">Empresa</a>
<div class="dropdown-menu">
Quem somos
Missao & Valores
Ambiente & Sustentabilidade
Higiene, Seguranc & Saude
Emprego & Igualdade de Oportunidades
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projectos em Curso</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contactos.html">Contacto</a>
</li>
<li class="nav-item">
<div class="row">
<div class="col">
<a href="#">
<img class="flag" src="./images/flags/portugal-flag-button-round-icon-256.png">
</a>
</div>
<div class="col">
<a href="#">
<img class="flag" src="./images/flags/spain-flag-button-round-icon-256.png">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="#">
<img class="flag" src="./images/flags/france-flag-button-round-icon-256.png">
</a>
</div>
<div class="col">
<a href="#">
<img class="flag" src="./images/flags/united-kingdom-flag-button-round-icon-256.png">
</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
I'm guessing this is a fairly straightforward fix, but this is the first time I'm creating a website from scratch. The little I know about web design I've gleamed from reading here and there. Thanks in advance!
Header