title: how do i fix this resizing issue with my container and div boxes
body: <p><em>If there is another thread with this answer that would be great as a disclaimer</em></p>
  
  <p>Please refer to the video on what my issue is. I want the div and header to resize proportionally when I make it bigger and smaller. The issue is that as I am resizing the div and header unalign from each other and look weird.</p>
  
  <p>Is the only solution a media query?</p>
  
  <p>here is a imgur video link to see the issue.</p>
  
  <p>Here is the code that I have so far. </p>
  
  <p><strong>The container box is orange only for navigational purposes while building the design. The box will not have color by the end.</strong></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>html {
     background-color:#0000ff;
    }
    #container {
     background-color:orange;
     width:100%;
    }
    #title {
     text-align:center;
     color:#ffffff;
     box-shadow: #ffffff 0px 0px 10px 10px;
     margin:75px auto;
     width:75%;
     padding:20px 10px 20px 10px;
     border-radius: 5px;
     letter-spacing: 15px;
     font-size:25px;
     line-height: 30px;
    }
  
    #image {
     width:50%;
     box-shadow:#ff0000 0px 0px 10px 10px;
     margin-left:165px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
   &lt;meta charset="UTF-8"&gt;
   &lt;title&gt;mockup week three&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;div id="container"&gt;
   &lt;div id="title"&gt;
    Week three
   &lt;/div&gt;
   &lt;div id="gif"&gt;
  &lt;image id="image" src="https://media.giphy.com/media/l41m4rC9j8kMjXB0k/source.gif" width="100%"&gt;&lt;/image&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>