I am currently working on aligning a picture and heading in a header section. My goal is to center both elements, with the picture being twice as tall as the heading. So far, I have them stacked one above the other:
.body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
header h1 {
font: 400 100px/1.3 'Berkshire Swash', Helvetica, sans-serif;
color: #2b2b2b;
text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0, 0, 0, 0.15);
border: 1px solid red;
}
.container {
width: 90%;
margin-left: 40px;
margin-right: 0;
padding: 0;
overflow: hidden;
border: 1px solid gray;
}
header {
background: gray;
text-align: center;
}
.logo {
display: inline-block;
margin: 0 auto;
border: 1px solid white;
}<header>
<div class="container">
<img src="my_logo2.png" alt="Logo" class="logo">
<h1>Auto Service</h1>
</div>
</header>Could someone please provide guidance on how I can achieve the desired result? Thank you.