Help with formatting header

Hello,

Can you help me with the css to customize the header? I'd like for the header to have the following:

* On desktop, logo is aligned to the left, primary nav is aligned to the right, search is to the right of primary nav, no off-canvas menu.
* On tablet/mobile, off-canvas menu is float aligned left, logo image is centered, search icon is on the right hand side. Close icon 'X' is aligned to the top right and says 'Close X'
* Essentially, I want the off-canvas menu to behave like it does for this site https://www.realestatedirect.com

This css gets me close, but has a few issues. The logo is always centered, but I only want it centered for tablet/mobile and left aligned for desktop. It doesn't play nice with the search icon:

/* Arrange Header elements */
.inside-header {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

/* Abs position logo center */
.site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Force nav left and site title right */
.site-branding {
    margin-left: auto;
}

.site-branding {
    text-align: right;
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    .inside-header {
        padding: 5px;
        align-items: center;
    }

    .site-logo {
        width: 150px;
        height: auto;
    }

    .site-branding {
        width: 8ch;
        /* Change width of site title */
        margin-bottom: 0 !important;
    }

    .site-description {
        font-size: 10px;
        /* change fornt site */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .inside-header {
        padding: 5px;
        align-items: center;
    }

    .site-logo {
        width: 200px;
        height: auto;
    }

    .site-branding {
        width: 8ch;
        /* Change width of site title */
        margin-bottom: 0 !important;
    }

    .site-description {
        font-size: 10px;
        /* change fornt site */
    }
}

/* Make Header Sticky */
.site-header {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}