trying to equally separate my logo / navigation links / social buttons & center those items as a whole

password is       lapanimation     . I appreciate your time. Much appreciated.

Website URL?

I apologize. www.lapanimation.com. Thanks for the quick response.

You could first change the header layout to center the navigation. Are you wanting each element to be spread out and have the same spacing?

Yes sir. I was hoping for everything to be on one line.

(LOGO) space (navigation links equally spaced however) space (social links). 

If that makes sense.

I've been able to go in multiple times and try to piece together code from other peoples examples of code for getting the navigation bar on one line. But there is always a small issue in spacing.

.header-actions.header-actions--right {
  width: 10%;
}
/* Nav one line */
.header-title-nav-wrapper {
    flex: 1 0 90%;
}
.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}

This was the last code I attempted.

28 minutes ago, lapanimation said:

This was the last code I attempted.

It looks like you're on the right path.

I would suggest this addition:

.header-layout-nav-center .header-title {
    width: 10%;
    flex: 1 1 10%;
}

and to delete this:

30 minutes ago, lapanimation said:

.header-layout-nav-center .header-nav {
    width: 100% !important;
    flex: 1 1 100%;
}

If you can implement this and then let me know we can make any other adjustments.

this looks good, except my navigation links are still wrapping to 2 lines. I really appreciate your help, sir.

Add this:

.header-title-logo {
    max-width: 20vw;
}
@media screen and (min-width: 768px) {
  .header-nav-item {
    font-size: 1.25vw;
  }
}

and replace this:

.header-layout-nav-center .header-title {
    width: 10%;
    flex: 1 1 10%;
}

With this:

.header-layout-nav-center .header-title {
    width: 20%;
    flex: 1 1 20%;
    max-width: 20vw;
}

Ziggy,

Well done, sir. That was an awesome experience seeing it be fixed. I really do appreciate your time and support. I have already checked out your website. I am just trying to get my site functional. I will be back when I am ready to level up. Thanks,

Ziggy,

Would there be a reason I am not able to change the size of my mobile logo size?

Ziggy,

I hope this explains. I am still unable to get my mobile logo bigger than in this screenshot. Thanks for your time, once again.

See yellow highlight, that needs to be in a media query:

So delete that, and replace with this:

1 hour ago, Ziggy said:

@media only screen and (min-width:768px) {
  .header-title-logo {
     max-width: 20vw;
  }
}