Aligning a header using flexbox with its contents below - html

Question

I am trying to make my headers contents (the logo and the white text) inline with the content class below where the logo is floating to the left and the text to the right but I am unable to do so since flexbox seems to be disallowing something, I just need help to figure this out.
Navigation Bar:
body {
background-color: #000000;
height: 100%;
margin: 0;
top: 0;
line-height: 160%;
position: relative;
font-family: Tahoma, Arial, Sans Serif;
font-size: 16px;
color: rgba(250, 250, 210, 0.6);
box-sizing: border-box;
overflow-y: hidden;
}
.navigationBar {
background: rgba(0, 0, 0, 0.8);
padding: 20px;
height: 35px;
width: 100%;
position: fixed;
box-shadow: 0px 3px 5px #000;
color: white;
font-size: 38px;
font-family: BurbankBigCondensed-Black, sans-serif;
top: 0;
display: -webkit-box;
/* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox;
/* TWEENER - IE 10 */
display: -webkit-flex;
/* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex;
/* NEW, Spec - Firefox, Chrome, Opera */
align-items: center;
justify-content: center;
}
.navigationLogo {
color: #ffa500;
float: left;
margin-right: 1000px;
}
.wrapper {
margin-top: 75px;
width: 100%;
overflow-y: auto;
height: calc(100vh - 75px);
position: fixed;
}
.content {
padding-top: 25px;
margin-left: auto;
margin-right: auto;
min-height: 1500px;
background: rgba(0, 0, 0, 0.5);
width: 1130px;
padding-left: 20px;
padding-right: 20px;
/*border-left: 1px solid #080808;*/
/*border-right: 1px solid #080808;*/
}
.navigationItem {
margin-right: 20px;
}
<div class="navigationBar">
<div class="navigationLogo">Fortnite
<font color="#ffae19">Pro</font>
<font color="#ffb732">Snipes</font>
</div>
<div class="navigationItem">EU</div>
<div class="navigationItem">NAE</div>
<div class="navigationItem">NAW</div>
</div>
<div class="wrapper">
<div class="content">
...
</div>
</div>