Trying to achieve perfect alignment, but encountering an issue where adding an image to the last element in the row causes it to shift to the left. See examples below:
Image added to the last element in the row
Image not added to the last element in the row
Utilizing Bootstrap 4 in conjunction with the latest ReactJS.
React/HTML
import React, { Component } from 'react';
class NavigationBar extends Component {
render() {
return (
<div>
{/* Navigation bar */}
<nav className="navbar navbar-expand-lg header">
{/* Wrap the code inside this div in a container */}
<div className="container">
{/* Navigation bar brand*/}
<a href="#" className="navbar-brand">
<img src="../../imgs/logo.png" className="header-brand" alt=""/>
</a>
{/* Pull the wrapped code to the right*/}
<div className="pull-right">
{/* Dropdown Menu */}
<div className="dropdown">
{/* Profile button to open multiple options */}
<button className="dropdown-toggle header-dropdown"
type="button"
data-toggle="dropdown"> Username
{/* Arrow down to show that it's a dropdown menu */}
</button>
{/* Dropdown Items */}
<ul className="dropdown-menu dropdown-menu-right">
<li>
<a className="dropdown-item" href="#">
<img className="dropdown-picto" src="../../imgs/settings.png" alt=""/>
Settings
</a>
</li>
<div className="dropdown-divider" />
<li>
<a className="dropdown-item" href="#">
<img className="dropdown-picto" src="../../imgs/support.png" alt=""/>
Support
</a>
</li>
<div className="dropdown-divider" />
<li>
<a className="dropdown-item" href="#">
<img className="dropdown-picto" src="../../imgs/logout.png" alt=""/>
Log out
</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
);
} }export default NavigationBar;
CSS
.hub {
background-color: #fff;
color: #666666;
height: 4.5rem;
border-bottom: solid #e2e2e2 0.5px;
margin-bottom: 3rem;
}
.hub-item {
color: #666666;
text-decoration: none;
margin-left: 5px;
font-size: 16px;
}
.hub-picto {
height: 35%;
width: 15%;
padding-right: 5px;
}