CSS Unable to center text in Div

Question

Observe the following banner I have:

I want the "My Website" and "Your Go To Stop!" text to align both vertically and horizontally but I'm having difficulty getting that to happen.

JS Fiddle: http://jsfiddle.net/z63234p1/

masthead {
  top: 32px;
  padding-right: 0px;
  background: #000;
  padding-left: 0;
  max-height: 100px;
  border-bottom: none;
  position: fixed;
  z-index: 3;
  width: 100%;
  min-height: 73px;
  color: #000;
  display: block;
  box-sizing: inherit;
}

.sidebar-toggle {
  float: left;
  border: 3px solid grey;
  border-right: none;
  height: 82px;
  margin-right: 0;
  width: 5%;
  overflow: hidden;
  padding: 0;
  color: #000;
  text-align: center;
}

button {
  border-radius: 0;
  transition: all 125ms ease-out;
  cursor: pointer;
  -webkit-appearance: button;
  font-size: 100%;
  margin: 0;
  max-width: 100%;
  vertical-align: baseline;
  line-height: 1.5;
  display: inline-block;
  align-items: flex-start;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.sidebar-toggle:before {
  content: "\f419";
  height: 24px;
  width: 16px;
  color: inherit;
  font-size: 16px;
  line-height: 24px;
  speak: none;
  text-decoration: inherit;
  vertical-align: top;
  font-style: normal;
  font-weight: normal
    display: inline-block;
  font-family: Genericons;
  -webkit-font-smoothing: antialiased;
}

.site-branding {
  width: 95%;
  display: inline-flex;
  margin-top: 0;
  margin-bottom: 0;
  float: left;
  max-width: 100%;
}

#sitelogo {
  display: inline-flex;
  vertical-align: middle;
  text-align: center;
}

.site-title {
  border: 3px solid grey;
  font-family: Impact, Charcoal, sans-serif;
  font-weight: normal;
  margin: 0 auto;
  text-align: center;
  line-height: normal;
  min-width: 150px;
  padding: 3px 8px;
  font-size: 6vh;
  height: 100%;
  color: white;
  float: left;
  max-width: 100%;
}

h1 {
  clear: both;
}

.site-description {
  background: #fff500;
  color: black;
  display: block;
  font-family: Impact, Charcoal, sans-serif;
  margin: auto auto;
  text-align: center;
  height: 100%;
  border-left: none;
  border-top: 3px solid grey;
  border-bottom: 3px solid grey;
  border-right: 3px solid grey;
  display: block;
  padding: 0 16px;
  font-size: 3vh;
  line-height: 2.3;
  float: left;
  clear: none;
}

<header id="masthead" class="site-header" role="banner">
  <button class="sidebar-toggle" aria-expanded="false" ><span class="screen-reader-text"><?php _e( 'Toggle Sidebar', 'boardwalk' ); ?></span></button>
  <div class="site-branding">
    <div id="sitelogo" class="clear">
      <h1 class="site-title"><a href="http://test.com" rel="home">My Website</a></h1>
      <h2 class="site-description">Your Go To Stop</h2>
    </div>
  </div>
</header>

I'm aware that the image above doesn't look at all like the output of JS Fiddle and I know that what I'm getting on my test site is a fluke rather than the actual output.

Can someone help me get my CSS worked out so that all of the text is vertically aligned within their cells and horizontally aligned accross the logo?

Thank you in advance.

Answer 1

Use this Css:

<style type="text/css">
    #masthead {
    top: 32px;
    padding-right: 0px;
    background: #000;
    padding-left: 0;
    max-height: 100px;
    border-bottom: none;
    position: fixed;
    z-index: 3;
    width: 100%;
    min-height: 73px;
    color: #000;
    display: block;
    box-sizing: inherit;
}

.sidebar-toggle {
    float: left;
    border: 3px solid grey;
    border-right: none;
    height: 73px;
    margin-right: 0;
    width: 5%;
    overflow: hidden;
    padding: 0;
    color: #000;
    text-align: center;
}

button {
    border-radius: 0;
    transition: all 125ms ease-out;
    cursor: pointer;
    -webkit-appearance: button;
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
    line-height: 1.5;
    display: inline-block;
    align-items: flex-start;
}

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.sidebar-toggle:before {
    content: "\f419";
    height: 24px;
    width: 16px;
    color: inherit;
    font-size: 16px;
    line-height: 24px;
    speak: none;
    text-decoration: inherit;
    vertical-align: top;
    font-style: normal;
    font-weight: normal
    display: inline-block;
    font-family: Genericons;
    -webkit-font-smoothing: antialiased;
}

.site-branding {
    width: 95%;
    display: inline-flex;
    margin-top: 0;
    margin-bottom: 0;
    float: left;
    max-width: 100%;
}

#sitelogo {
    display: inline-flex;
    vertical-align: middle;
    text-align: center;
}

.site-title {
    border: 3px solid grey;
    font-family: Impact, Charcoal, sans-serif;
    font-weight: normal;
    margin: 0 auto;
    text-align: center;
    line-height: normal;
    min-width: 150px;
    padding: 4px 8px;
    font-size: 6vh;
    height: 100%;
    color: white;
    float: left;
    max-width: 100%;
}

h1 {
    clear: both;
}

.site-description {
     background: #fff500;
    color: black;
    font-family: Impact, Charcoal, sans-serif;
    margin: auto auto;
    text-align: center;
    height: 100%;
    border-left: none;
    border-top: 3px solid grey;
    border-bottom: 3px solid grey;
    border-right: 3px solid grey;
    display: block;
    padding: 6px 16px;
    font-size: 3vh;
    line-height: 2.3;
    float: left;
    clear: none;
}
</style>