I'm trying to center-align an image and a set of links in the center column of my navigation layout. When I don't specify a width for the .center-column element, the alignment works perfectly. However, when I set the width to 500px, the image and links do not align properly
I've tried adjusting the justify-content, align-items, and setting margin properties on the child elements, but the issue persists.
body { margin: 0 auto;}.nav-wrapper { height: 190px; background: #12122C; color: #cbcbcb; display: flex; justify-content: space-between; align-items: center; padding: 60px 100px;}.nav-wrapper > .left-column { display: flex; align-items: center;}.nav-wrapper > .left-column > .icon { margin-right: 15px; font-size: 2em;}.nav-wrapper > .left-column .phone-hour-wrapper { display: grid; grid-template-columns: 1fr; grid-gap: 10px;}.nav-wrapper > .center-column { display: grid; grid-template-columns: 1fr; grid-gap: 42px; width: 500px; /* Causes misalignment */}.nav-wrapper > .center-column > .image-banner img { width: 216px; height: 100%;}.nav-wrapper > .center-column > .link-wrapper { display: flex; justify-content: space-between; align-items: center;}<body><div class="nav-wrapper"><div class="left-column"><div class="icon"><i class="fas fa-phone-volume"></i></div><div class="phone-hour-wrapper"><div class="phone">555 555 5555</div><div class="hour">10 AM - MIDNIGHT</div></div></div><div class="center-column"><div class="image-banner"><img src="https://drive.google.com/file/d/1f9Xa3YFEuAYNsMe0gPjzX9ukL45yX6gv/view?usp=sharing" alt="logo"></div><div class="link-wrapper"><div class="link"><a href="#"></a>Home</div><div class="link"><a href="#"></a>About Us</div><div class="link"><a href="#"></a>Menu</div><div class="link"><a href="#"></a>Contact</div></div></div><div class="right-column"> 123 Any Street Scottsdale, AZ 85251</div></div></body>