Making message appear in the middle of screen - html

Question

I recently started to play round with Bootstrap and I created my logo to go on the top left of the page, and then the nav bar to go on the same line but on the right hand side, and then I wanted to say in the middle of the screen: "Welcome blablah"
However, the welcome bit appears on the top part of the screen, rather then the middle, so it's overlapping the logo for some reason.
Not sure why this is doing this, guessing some bad coding etc.
body {
font-family: 'Open Sans', sans-serif, Arial;
font-size: 16px;
color: #6D6D6D;
background-color: #F5F5F5;
font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Montserrat', sans-serif, Arial;
padding-bottom: 5px;
color: #373432;
line-height: 1em;
font-weight: normal;
}
a {
text-decoration: none;
outline: none;
}
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
}
.logo {
float: left;
padding-top: 50px;
padding-left: 40px;
}
.logo h1 {
text-transform: uppercase;
font-weight: 900;
font-size: 60px;
letter-spacing: -5px;
line-height: 50px;
color: white;
}
.navbar-nav>li>a {
line-height: 6px;
}
.navbar {
float: right;
padding-top: 53px;
padding-right: 60px;
font-size: 13px;
text-transform: uppercase;
}
.navbar-default {
background-color: transparent;
border-top: 0px solid rgba(0, 0, 0, 0.5);
border-bottom: 0px solid rgba(0, 0, 0, 0.5);
border-left: 0px solid rgba(0, 0, 0, 0.5);
border-right: 0px solid rgba(0, 0, 0, 0.5);
}
.navbar-default .navbar-nav>li>a {
color: #ffffff;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
background-color: #F8BD23;
text-decoration: none;
color: #ffffff;
-webkit-transition: background-color 200ms linear;
-moz-transition: background-color 200ms linear;
-o-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;
}
.navbar-nav>li {
padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="parallax">
<div class="logo"><img src="http://placehold.it/50x50"></div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
a
</li>
<li>
b
</li>
<li>
c Us
</li>
<li>
d
</li>
<li>
e
</li>
<li>
f
</li>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Classes</a>
<ul class="dropdown-menu">
<li>
a
</li>
<li>
b
</li>
<li>
c
</li>
<li>
d
</li>
<li>
We
</li>
<li>
r
</li>
<li>
a
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
<div class="container">
<div class="HomeMes">
<h1>WELCOME</h1>
</div>
</div>
</div>
The way I could "fix" it is do margin-top: 200px; on the HomeMes class but I know this is bad coding, so I'm trying to find the right way of doing it. If anyone could let me know what I have done wrong that would be excellent. Thanks.
So it should look like this :
Logo Navbar
Welcome message

Answer 1

There you go sir, change your container class to this :
.container {
width:100%;
height:100%;
display:flex;
justify-content:center;
flex-direction: column;
align-items: center;
}
Tested it in chrome and it works, but for some reason it doesn't work in code snippet preview. Hope this helps you. Display:flex helps a lot when trying to horizontally+vertically align elements!