title: CSS responsive markup section
body: <p>Looking for improving my css skills, I created small site, the idea is to get best practice when creating responsive web sites. following simple HTML markup:</p>
  
  <pre><code>      &lt;section class="bg-image"&gt;
          &lt;img src="https://placehold.it/1606x1189"  alt="imagem"/&gt;
  
          &lt;div class="title"&gt;
              &lt;h2&gt;I'm Title, &lt;br /&gt;Sub Title&lt;/h2&gt;
              &lt;button class="button-type-1"&gt;Click Me 1&lt;/button&gt;
          &lt;/div&gt;
  
         &lt;div class="box"&gt;
             &lt;p class=".box-type-1"&gt;
             There’s no magic pill you can take that will somehow attract rich people to your cause like moths to a flame.&lt;/p&gt;
             &lt;p class=".box-type-2"&gt;
             There’s no magic pill you can take that will somehow attract rich people to your cause like moths to a flame.&lt;/p&gt;
               &lt;br /&gt;
             &lt;button class="button-type-2"&gt;Click Me 2&lt;/button&gt;
             &lt;button class="button-type-3"&gt;Click Me 3&lt;/button&gt;
         &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>I created in order to be responsive..</p>
  
  <p>When I zoom in and zoom out, the title div and the box div, they just got off the viewport on different directions.</p>
  
  <pre><code>.image{
    position: relative;
    max-width: 100%;
    height: 1189px;
    width: 1606px;
    opacity: 0.75;
  }
  
  .title h2 {
    position: absolute;
    color: rgb(37, 37, 78);
    padding: 10px;
    top:132px;
    left:32%;
    font-size: 80px;
    letter-spacing: -0.1px;   
    line-height: 70px;    
   }
  
  .title .button-type-1 {
    position: absolute;
    background-color: rgb(177, 166, 9);
    height: 48px;
    width: 265px;
    border: 1px solid #FFFFFF;
    border-radius: 34px;
    left:43%;
    top: 33%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 10px 20px 0 rgba(0,0,0,0.05);
  }
  
  .box {
      position: absolute;
      left:150px;
      top: 550px;
      height: 270px;
      width: 60%;
      left:23%;
      border-radius: 4px;
      background-color: #FFFFFF;
      box-shadow: 0 0 30px 0 rgba(0,0,0,0.05), 0 4px 8px 0 rgba(0,0,0,0.08);
  }
  
  .box .box-type-1 {
      height: 26px;
      width: 315px;
      color: #1E1C1A;
      font-family: ".SF NS Display";
      font-size: 25px;
      line-height: 26px;
  }
  
  .box .box-type-2 {
      height: 56px;
      width: 1017px;
      color: #535355;
      font-family: ".SF NS Display";
      font-size: 20px;
      line-height: 28px;
      text-align: center;
  }
  
  .button-type-2 {    
      height: 48px;   
      width: 224px;   
      border-radius: 34px;    
      background-color: #3d8b49;  
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 10px 20px 0 rgba(0,0,0,0.05);
  }
  
  .button-type-3 {    height: 48px;   width: 209px;   border-radius: 34px;    
      background-color: #B8455a;  
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 10px 20px 0 rgba(0,0,0,0.05);
  }
  </code></pre>
  
  <p>So how can I fix the issue when I zoom in the div tags content sticks to being responsive and not just go off the viewport.</p>
  
  <p>What is the best practice I should be looking in when creating responsive app.</p>