Flex-end and start not aligning vertically - html

Question

CSS
#import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: white;
}
.zindex {
position: absolute;
left: 50%;
top: 15px;
z-index: 2;
}
#logo {
padding-bottom: 20px;
}
.center {
display: flex;
align-self: center;
}
.bodyclass {
background-color: #05426E;
height: 160px;
}
.content-container {
border-style: solid;
border-width: 5px;
margin-top: 5%;
margin-left: 15%;
margin-right: 15%;
margin-bottom: 15%;
}
.footer-container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
#flexstart {
display: flex;
justify-content: flex-start;
align-items: center;
}
#flexend {
display: flex;
justify-content: flex-end;
align-items: center;
}
.centernav {
display: flex;
justify-content: center;
justify-items: center;
justify-self: center;
text-justify: center;
}
.snip1226 {
font-family: 'Raleway', Arial, sans-serif;
text-align: center;
text-transform: uppercase;
font-weight: 500;
color: black;
}
.snip1226 * {
box-sizing: border-box;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
color: black;
}
.snip1226 li {
list-style: outside none none;
margin: 0 1.5em;
overflow: hidden;
color: black;
}
.snip1226 a {
padding: 0.3em 0;
position: relative;
display: inline-block;
letter-spacing: 1px;
margin: 0;
color: white;
text-decoration: none;
}
.snip1226 a:before,
.snip1226 a:after {
position: absolute;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
}
.snip1226 a:before {
bottom: 100%;
display: block;
height: 3px;
width: 100%;
content: "";
background-color: #FCDA18;
}
.snip1226 a:after {
padding: 0.3em 0;
position: absolute;
bottom: 100%;
left: 0;
content: attr(data-hover);
white-space: nowrap;
}
.snip1226 li:hover a,
.snip1226 .current a {
transform: translateY(100%);
}
import React from 'react';
import logo from "./logo.gif";
const Navbar = () => {
return <div className="bodyclass">
<header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l">
<nav class="f6 fw6 ttu tracked">
<div>
<ul id='flexstart' class="snip1226">
<li><a href="#" data-hover="Home" className='pr5 pl5'>Home</a></li>
<li>About Us</li>
<li>Blog</li>
<img src={logo} height="125px" className='zindex' />
</ul>
<div id='flexend'>
<ul id='flexend' class="snip1226">
<li><a href="#" data-hover="Home" className='centernav'>Home</a></li>
<li>About Us</li>
<li>Blog</li>
</ul>
</div>
</div>
</nav>
</header>
</div>;
}
export default Navbar;
React
I am trying to center the list items horizontally centered, but no matter what I do with CSS it remains like that. I know it has something to do with flex-end and flex-start, but I cannot figure out how to center it. I have tried both the align and justify properties but it doesn't seem to do anything.
I would also like to add that I want the elements to be all in one row that is centered within the navigation bar. I have to leave room inbetween them because the logo goes in the middle.

Answer 1

To horizontally center the contents your your lists (menus), this should be achievable by making the following adjustments to your CSS:
#flexstart {
display: flex;
/* justify-content: flex-start; Remove */
justify-content: center;
align-items: center;
}
#flexend {
display: flex;
/* justify-content: flex-end; Remove */
justify-content: center;
align-items: center;
}
For a working jsFiddle, please see this link (note I set background to black to make contents visible)
Update #2
To center vertically, you can make the following adjustments:
CSS:
/* Add this rule */
#flex-wrap {
display:flex;
flex-direction:row;
justify-content:center;
}
ul {
padding:0;
margin:0;
}
HTML:
<nav class="f6 fw6 ttu tracked">
<!-- UPDATE add id flex-wrap -->
<div id="flex-wrap">
<ul id='flexstart' class="snip1226">
<li><a href="#" data-hover="Home" className='pr5 pl5'>Home</a>
Newly updated jsFiddle #2 here