I am having trouble centering a logo and the words 'style guide' next to each other in the header. I am using flexbox for this layout, but the text positioning seems off. I suspect it may be due to scaling the logo to half size, but I can't figure out how to correct it. Any insights on why this is happening?
Here is the HTML:
<div class="header">
<div class="container">
<img src="http://i1077.photobucket.com/albums/w474/skottunder/example-logo_zpsso7yyy5k.jpg"></img>
<span id="header-text">Style Guide</span>
</div>
</div>
And the CSS:
.header {
background: #317cde;
width: 100%;
}
.container {
margin: 0 auto;
padding: 10px 0;
width: 320px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.header .container img {
transform: scale(0.5);
float: left;
}
#header-text {
color: #fff;
font-size: 28px;
float: left;
}
Explore the CodePen example.