Sider - library align menu left

Perhaps something wrong with my code?

Any chance you can link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Thank you - linked.

Hi Stencil,

Tried viewing your site but the password is incorrect. Can you check if the password provided is working?

Sorry - I've changed it, what I gave works now.

Sending again incase you don't have it - same as before, I just had another plugin running over the password protect one, turned off now.

Try add this CSS:

@media (min-width: 769px) {
.site-header .main-navigation li {
    width: 450px;
    margin-left: -40px;
}
}

Thanks added but nothing has changed - text alignment still central.

Hi there,

try this:

.nav-float-right #site-navigation,
.nav-float-right #site-navigation .main-nav,
.nav-float-right #site-navigation .main-nav li{
    width: 100%;
}
.nav-float-right #site-navigation .main-nav li a {
    padding-left: 0;
}

Thank you - no change.

Incase there is something I need to edit/remove, here is a copy of my additional CSS currently...

/* GeneratePress Site CSS */ @media (min-width: 1000px) {
	body {
		margin-left: 450px;
	}

	.site-header {
		position: fixed;
		left: 0;
		top: 0;
		width: 450px;
		z-index: 450;
		height: 100%;
		overflow: auto;
		overflow-x: hidden;
		-webkit-backface-visibility: hidden;
		-webkit-overflow-scrolling: touch;
		transition: .1s ease;
	}
	
	.admin-bar .site-header {
		top: 32px;
	}
	
	.site-header .main-navigation li {
		float: none;		
		border-bottom: 1pt solid #0e9388;
	}

.inside-header {
	display: flex;
  flex: 1;
  flex-direction: column;
	align-items: left;

}
.site-branding,
.site-logo {
    order: 1;
}

.header-widget {
	order: 3;
	text-align: center;
}

.nav-float-right .inside-header .main-navigation {
	order: 2;
	float: none;
	margin-top: 70px;
	margin-bottom: 280px;	
	text-align: left;
}

.dropdown-click .site-header .main-navigation ul ul {
    position: relative;
}

.main-navigation .main-nav>ul {
    flex-direction: column;
}

.nav-float-right .header-widget .widget {
    margin-bottom: 5px;
}

.nav-float-right #site-navigation {
    margin-right: auto;
}

.main-navigation.toggled .main-nav li {
	text-align: left !important;
}

@media (max-width:769px) {
	.separate-containers   {
		margin-top: 20px;
		margin-bottom: 0;
	}
	

	@media (min-width: 769px) {
.site-header .main-navigation li {
    width: 450px;
    margin-left: -40px;
}
}
	.nav-float-right .inside-header .main-navigation {		
		margin-top: 0;
	}

	.nav-float-right #site-navigation,
.nav-float-right #site-navigation .main-nav,
.nav-float-right #site-navigation .main-nav li{
    width: 100%;
}
.nav-float-right #site-navigation .main-nav li a {
    padding-left: 0;
}
	
} /* End GeneratePress Site CSS */

Ok, theres a few errors in your CSS in the Customizer > Additional CSS.
Delete all of it, and add this:

.nav-float-right .inside-header .main-navigation {
    margin-top: 0;
}

.nav-float-right #site-navigation,
.nav-float-right #site-navigation .main-nav,
.nav-float-right #site-navigation .main-nav li {
    width: 100%;
}

.nav-float-right #site-navigation .main-nav li a {
    padding-left: 0;
}
@media (min-width: 1000px) {
    body {
        margin-left: 450px;
    }

    .site-header {
        position: fixed;
        left: 0;
        top: 0;
        width: 450px;
        z-index: 450;
        height: 100%;
        overflow: auto;
        overflow-x: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-overflow-scrolling: touch;
        transition: .1s ease;
    }

    .admin-bar .site-header {
        top: 32px;
    }

    .site-header .main-navigation li {
        float: none;
        border-bottom: 1pt solid #0e9388;
    }

    .inside-header {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: left;

    }

    .site-branding,
    .site-logo {
        order: 1;
    }

    .header-widget {
        order: 3;
        text-align: center;
    }

    .nav-float-right .inside-header .main-navigation {
        order: 2;
        float: none;
        margin-top: 70px;
        margin-bottom: 280px;
        text-align: left;
    }

    .dropdown-click .site-header .main-navigation ul ul {
        position: relative;
    }

    .main-navigation .main-nav>ul {
        flex-direction: column;
    }

    .nav-float-right .header-widget .widget {
        margin-bottom: 5px;
    }

    .nav-float-right #site-navigation {
        margin-right: auto;
    }

    .main-navigation.toggled .main-nav li {
        text-align: left !important;
    }
}

@media (max-width:769px) {
    .separate-containers {
        margin-top: 20px;
        margin-bottom: 0;
    }

}

NOTE: the CSS from the other topic, you can at the very top of your CSS.

Oh that's worked for the menu thank you!!!
Could the burger menu have the same layout - ie divider lines / spacing?

Add this at the very top of that CSS:

#mobile-header.main-navigation li {
    padding: 0 20px;
}
#mobile-header.main-navigation li a {
    border-bottom: 1pt solid #0e9388;
    padding-left: 0;
}

Perfect thank you so much David :)