Editing Menu Alignment

Hi. How do I edit the menu alignment with the logo? I am currently using css to manage the logo correclty with the svg plugin. When I use the settings on the layout > headers and give it padding it increases the size of the header but doesn't adjust the alignment at all.

Here are some setting screenshots.
https://cl.ly/3O0f0u2c1d2H

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/

.slideout-navigation {
color: #ffffff;

}
.slideout-navigation {
left: auto !important;
right: 0;
transform: translateX(100%) !important;
}

.slide-opened .slideout-navigation {
transform: translateX(0px) !important;
}

.slideout-toggle a {
font-size: 18px;

}

#generate-slideout-menu {
padding-top: 5px;
}

#generate-slideout-menu {
background-color: rgba(0,0,0,0.9);
}

.slideout-toggle a:after {
content: 'MENU';
padding-left: 0px;
}
.main-navigation.slideout-navigation .main-nav ul li a,
.main-navigation.slideout-navigation .menu-toggle {
color: #FFFFFF;
}

.main-navigation.slideout-navigation .main-nav ul li a:hover {
color: #999999;
}

.main-navigation.navigation-stick .navigation-logo img {
width: auto;
}

@media (min-width: 769px) {
.site-logo img {
width: 400px;
height: 80px;
}
}
.gform_wrapper .gfield_required {
display: none;
}