79207104

Date: 2024-11-20 12:03:33
Score: 0.5
Natty:
Report link

When you give the specific width to the grid div element, it starts from the left align just add the justify-items: center; to the set image center. To use the display:grid use the justify-items instead of justify-content.

Also, in the link below the image link-wrapper div, add the column-gap: 10px; as you need to change the value. So all the links set the gap from links.

Here is the code to fulfill your requirements.

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;
    justify-items: center;
    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;
    column-gap: 10px; /*Change as per requirement*/
    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>

Reasons:
  • Blacklisted phrase (1): the link below
  • Long answer (-1):
  • Has code block (-0.5):
  • Starts with a question (0.5): When you give the
  • Low reputation (0.5):
Posted by: Prashant