Newbie here.
I'm currently developing a cupcake shop for a school project. The project is limited use of HTML & CSS for the frontend part.
I want to align the currently logged in users name, with the two icons. Currently the users name sits a little above the icons.
I have tried to group it all into a class and style = align right, but found no good solutions.
<!-- start of "admin" (shows the currently logged in users name) -->
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link" style="font-size: 30px"
href="${pageContext.request.contextPath}/ServletLogincondition">${sessionScope.user.username}</a>
<!-- start of profile logo with dropdown menus that allows for login and logout -->
<div class="dropdown">
<button class="kurv dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="${pageContext.request.contextPath}/images/profil.png" width="50" height="50" alt="Kurv">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="${pageContext.request.contextPath}/login.jsp">log ind</a>
<a class="dropdown-item" href="${pageContext.request.contextPath}/logout">log ud</a>
</div>
</div>
<!-- start of shopping basket logo with drop down menus -->
<div class="dropdown">
<button class="kurv dropdown-toggle" type="button" id="dropdownMenuButton"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="${pageContext.request.contextPath}/images/bag.png" width="50" alt="Kurv">
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="https://lagkagehuset.dk/">kage</a>
</div>
</div>
