title: New To HTML/CSS Can't Get Divs In Header To Stay In Place And Keep Aspect Ratio With Window Resize
body: <p>First of all, I apologise if most of this code is messed up. I've been trying to solve this problem and have made a number of adjustments without really knowing what I'm doing.</p>
  
  <p>I'm totally new to html and CSS. I'm attempting to make a header, everything looks fine until I try to decrease the window size. </p>
  
  <p>I wanted 2 images either side of the title. I made a div within the main container (.banner) div, and put the two separate images in there too. </p>
  
  <p>As soon as I decrease the width the whole thing begins to squish down, the photos loose their width until they go distorted (they seem to keep their height), the main title text and the text below starts stacking vertically, so the 'Webpage' shoots below 'My First' etc and the righthand side image shoots down and left below everything. </p>
  
  <p>How do I make it so everything keeps it's aspect ratio as the browser window decreases in size? I don't want them to be a fixed size with any size window, I want them to decrease in size with the window whilst holding their position and aspect ratio. </p>
  
  <p>I hope that makes sense.</p>
  
  <p>Thanks. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  margin: 0;
  background-color: black;
  
  }
  
  .banner {
  
  }
  
  
  .banner-photo1 {
  height: 250px;
  width: 10%;
  display: inline-block;
  border-radius: 50%; 
  margin-top: 6%;
  margin-left: 2%;
  min-width: 10%;
  }
  
  .banner-photo2 {
  height: 250px;
  width: 10%;
  display: inline-block;
  border-radius: 50%;
  margin-top: 6%;
  margin-right: 2%;
  min-width: 10%;
  }
  .banner-title  {
  height: 50%;
  width: 75%;
  color: #9649CB;
  display: inline-block;
  background-color: black;
  margin-right: 0;
  
  }
  
  .banner h1 {
  
  font-size: 150px;
  padding: 0; 
  margin-top: 0;
  text-align: center;
  margin-bottom: 0;
  }
  .banner-title h2 {
  font-size: 60px;
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  }
  
  .banner-title p {
  text-align: center;
  margin-top: 0;
  font-size: 40px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Sample Website&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div class="banner"&gt;
              &lt;img class="banner-photo1" 
      src="https://www.startuptalks.in/wp-content/uploads/2016/04/HTML.jpg"&gt;
              
              &lt;div class="banner-title"&gt;
                &lt;h1&gt;My First Webpage&lt;/h1&gt;
                &lt;h2&gt;Made With HTML &amp; CSS&lt;/h2&gt;
                &lt;p&gt;This Is A Sample Header&lt;/p&gt;
              &lt;/div&gt;
              
              &lt;img class="banner-photo2" 
      src="http://icons.iconarchive.com/icons/graphics-
      vibe/developer/256/css-icon.png"&gt;
              
          &lt;/div&gt;  
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>