Change Header Spacing

Sure 🙂 Here we go to center the header:

@media (min-width: 768px) {
	/* Header */
	.site-header .container {
		height: auto;
	}
	.site-header .site-branding-container {
		float: none;
		max-width: 100%;
		padding-right: 0;
	}
	.main-navigation {
		float: none;
		text-align: center;
		max-width: 100%;
	}
	.main-navigation>div {
		float: none;
		display: inline-block;
		vertical-align: top;
	}
	.main-navigation div>ul>li>a {
		height: 60px;
		line-height: 60px;
	}
}

That works! But instead of having the logo centered, what do I need to do to make it left or right aligned?

You can try removing all Custom CSS related to this task and inserting the following:

@media (min-width: 800px) {
  .site-header .site-branding-container {
    display: block !important;
    float: none;
    max-width: 100%;
    padding: 20px 0;
  }
  
  .main-navigation {
    float: none;
    max-width: 100%;
  }
  
  .main-navigation div > ul > li > a {
      height: 60px;
      line-height: 60px;
  }
}

Great!! Is there any way to change it so when I scroll down the menu doesn’t cover up part of the logo? The bottom text part of my logo is getting covered by the menu whenever I scroll down.

Do you perhaps want to just make the boxed container wider so the menu and logo fit on one line? Unfortunately, with CSS adjustments like this there can be several knock on issues that have to be dealt with.

I understand. Sure, I think that will work.

You can try the following to deal with the sticky header issue assuming you keep the previous Custom CSS:

.site-header.scale.scaled .site-branding-container .site-branding img {
	max-height: 57px;
}

You could also disable the sticky header if it isn’t an important site feature.

If you want to instead, make the boxed container wider, you could use:

.boxed #page {
	max-width: 1250px;
}

.container {
    max-width: 1250px;
}