Inlining logo with header element

HTML Code:

<div class="header">

   <img src=".jpg" width="240" height="180">

    <h1>MY APPS</h1>
    <p>TRY AND ERROR, CODING IS FUN</p>  
</div>

CSS:

.header{
  background-color: rgb(255,255,255,0.7);
  }

 .header img {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}


 .header h1 {
  position: relative;
  top: 18px;
  left: 50%;
  padding: 12.5px
 }

 .header p {
  position: relative;
  top: -25px;
  left: 50%;
  padding: 12.5px
 }

How can I put <img> inline with my <h1> ?