title: HTML, CSS : Responsive header with logo and text
body: <p>I'm really having a lot of trouble trying to recreate this Wix site with the goal of having the mobile &amp; desktop website responsive with other content.</p>
  
  <p><a href="http://nl.wix.com/website-template/view/html/936?&amp;viewMode=mobile" rel="nofollow noreferrer">http://nl.wix.com/website-template/view/html/936?&amp;viewMode=mobile</a></p>
  
  <p><a href="https://i.stack.imgur.com/UFB98.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UFB98.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/5oZz4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5oZz4.png" alt="enter image description here"></a></p>
  
  <p>As soon as I use a different width the 30° moves to a different position,
  which means the site isn't properly responsive. I have no idea how to fix this.
  Here's my code: </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="header"&gt;
          &lt;h1&gt;30 &amp;deg;C&lt;/h1&gt;
          &lt;div class="clearfix"&gt;&lt;img src="./img/banner.png" alt="banner"&gt; &lt;/div&gt;
          &lt;p&gt;Beginning application developer&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.header {
      background-color: #7A7CB1;
      width:100%;
      position:absolute;
      top:0;
      left:0;
  }
  
  .header img {
      width: 62.5%;
      margin-top: 2.5%;
      margin-left: 6.75%;
      float:left;
  }
  
  .header h1 {
      position: absolute;
      top: 30%;
      left: 30%;
      font-size: 200%;
  }
  
  .clearfix {
      overflow: auto;
  }
  
  .header p {
      margin-left: 6.75%;
      font-family: Verdana, geneva, sans-serif;
      font-size: 13px;
  }
  </code></pre>
  
  <p>I want the 30° to be below the logo like it is in the photo, but the logo and the text should become smaller or bigger (responsive) if the width of the phone is smaller or bigger.</p>