Logo Image Centered & Menu Bar Below Logo
<p>The logo of a site I am working appears on  the left but i want it to be centered. How can I go about it ? Find below the CSS code.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>header .logo{ display: inline-block; padding: 0; vertical-align: middle;}</code></pre>
</div>
</div>
</p>

<p>Also the menu bar appear on the right hand side of the logo but I want it to be centered and below the logo. How can I do that?</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.nav-right-area{ display: inline-block; vertical-align: middle;}
.navigation{ display: inline-block; vertical-align: middle;}
.navigation &gt; ul{ margin-top: 0px;}
.navbar{ margin-bottom: 0; min-height: inherit;}</code></pre>
</div>
</div>
</p>

<p>Image if the header of the site where the logo and the menu shows is found below:<a href="https://i.stack.imgur.com/or006.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/or006.png" alt="enter image description here"></a></p>

<p>Link to the site is <a href="http://midwaycinema7.com/" rel="nofollow noreferrer">http://midwaycinema7.com/</a></p>

<p>Heads up will be appreciated.</p>