title: Different div Contents overlap on browser resize
body: <p>On re-sizing the browser the div elements overlap each other.</p>
  
  <p>The html file is present at below url:- 
  Please help.
  <a href="http://codepen.io/SanjeetSk/pen/ZQBBaz" rel="nofollow">http://codepen.io/SanjeetSk/pen/ZQBBaz</a></p>
  
  <p>Please do not suggest min-width and overflow hidden type of answers.
  I am looking for the real solution that is associated with this page and not the workaround. That is why the codepen link is present with this post.
  once again
  <a href="http://codepen.io/SanjeetSk/pen/ZQBBaz" rel="nofollow">http://codepen.io/SanjeetSk/pen/ZQBBaz</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.home-area, .work-area, .contact-area {
  padding: 80px 20px 80px 20px;
  position: relative;
  height: 100vh;
  /* overflow: hidden; */
  }
  
  .navbar-toggle{
    width: 42px;
    height: 38px;
    float: right;
    margin-top: 10px;
  }
  
  .navbar-toggle * {
   -ms-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
  }
  
  .navbar-toggle span {
   width: 20px;
   height: 2px;
   margin-bottom: 3px;
   background-color: green;
   display: block;
  }
  
  /* Codepen styling, not required for use */
  .navbar-toggle span.bar1 {
   -ms-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
   -ms-transform-origin: 1px 3px;
   -webkit-transform-origin: 1px 3px;
    -moz-transform-origin: 1px 3px;
    -o-transform-origin: 1px 3px;
   transform-origin: 1px 3px;
   width: 24px;
  } 
  .navbar-toggle span.bar2 {
    -ms-transform: rotate(-360deg) scale(0);
    -webkit-transform: rotate(-360deg) scale(0);
    -moz-transform: rotate(-360deg) scale(0);
    -o-transform: rotate(-360deg) scale(0);
    transform: rotate(-360deg) scale(0);
  }
  .navbar-toggle span.bar3 {
    -ms-transform: rotate(360deg) scale(0);
    -webkit-transform: rotate(360deg) scale(0);
    -moz-transform: rotate(360deg) scale(0);
    -o-transform: rotate(360deg) scale(0);
    transform: rotate(360deg) scale(0);
  } 
  .navbar-toggle span.bar4 {
   -ms-transform: rotate(-45deg);
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg);
   -ms-transform-origin: 2px 0px;
   -webkit-transform-origin: 2px 0px;
   transform-origin: 2px 0px;
   width: 24px;
  }
  .navbar-toggle.collapsed span.bar1,
  .navbar-toggle.collapsed span.bar2,
  .navbar-toggle.collapsed span.bar3,
  .navbar-toggle.collapsed span.bar4 {
   -ms-transform: none;
   -webkit-transform: none;
   transform: none;
   width: 20px;
  }
  .footer{
  height: 50px;
  background-color: #ffc04c;
  }
  .copyright{
     padding-top: 10px 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;!-- Designed and Developed by DigitalSrishti inc --&gt;
    &lt;!--  DigitalSrishti :- Your Digital partner for sustainable future --&gt;
    &lt;title&gt;My Portfolio&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body data-spy="scroll" data-target="#navbar"&gt;
    &lt;div class="navbar navbar-default navbar-fixed-top bs-dos-nav " role="navigation"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;div class="navbar-toggle collapsed target" data-toggle="collapse" data-target="#navbar" id="rotate"&gt;
            &lt;span class="bar1"&gt;&lt;/span&gt;
            &lt;span class="bar2"&gt;&lt;/span&gt;
            &lt;span class="bar3"&gt;&lt;/span&gt;
            &lt;span class="bar4"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;a href="#" class="navbar-brand"&gt;Your Logo&lt;/a&gt;
        &lt;/div&gt;
        &lt;nav id="navbar" class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav navbar-right main-navigation text-uppercase "&gt;
            &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#work"&gt;Work&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#resume"&gt;Resume&lt;/a&gt;&lt;/li&gt;
            &lt;li class="disabled"&gt;&lt;a href="#social"&gt;Social&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- &lt;a href = "_http://themes.getbootstrap.com/products/application"&gt; click here I liked the friends and enemy :-) profile&lt;/a&gt; --&gt;
    &lt;!-- Start Home --&gt;
    &lt;div id="home"&gt;
      &lt;div class="home-area"&gt;
        &lt;div class="container"&gt;
          &lt;h1&gt;&lt;strong&gt;Sanjeet Shukla&lt;/strong&gt;&lt;/h1&gt;
          &lt;p&gt;Have a look at some &lt;strong&gt;Works&lt;/strong&gt; I have done so far, it &lt;strong&gt;BI Designer&lt;/strong&gt; creating modern and responsive reports for &lt;strong&gt;Web&lt;/strong&gt; and &lt;strong&gt;Mobile&lt;/strong&gt;. You can view my&lt;strong&gt;Profile&lt;/strong&gt; and &lt;strong&gt;resume&lt;/strong&gt;          and also find a link to become my friend or enemy on social sites, it is cool.. right?&lt;/br&gt; Let us work together. Thank you.&lt;/p&gt;
          &lt;a href="#work" class="btn btn-default"&gt;Let's Begin&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End Home --&gt;
  
    &lt;!-- Start Work --&gt;
    &lt;div id="work"&gt;
      &lt;div class="work-area"&gt;
        &lt;div class="container"&gt;
          &lt;h1&gt;My &lt;strong&gt;Work&lt;/strong&gt;&lt;/h1&gt; Have a look at some of my &lt;strong&gt;Works&lt;/strong&gt; It may help you choose best partner for your work ;-)
          &lt;diV class="row"&gt;
            &lt;div class="col-md-3"&gt;
              &lt;h4&gt;Mobile Dict&lt;/h4&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3"&gt;
              &lt;h4&gt;HTML Template&lt;/h4&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. &lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3"&gt;
              &lt;h4&gt;tic-toe Game&lt;/h4&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3"&gt;
              &lt;h4&gt;Pathshala(ERP)&lt;/h4&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;!--         &lt;diV class="row"&gt;
            &lt;div class="col-md-3"&gt;
              &lt;h4&gt;Mobile Dict&lt;/h4&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3"&gt;
              &lt;h4&gt;HTML Template&lt;/h4&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. &lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3"&gt;
              &lt;h4&gt;tic-toe Game&lt;/h4&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="col-md-3"&gt;
              &lt;h4&gt;Pathshala(ERP)&lt;/h4&gt;
              &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt; --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- End Work --&gt;
  
    &lt;!-- Start Contact --&gt;
    &lt;div id="contact"&gt;
      &lt;div class="contact-area"&gt;
        &lt;div class="container"&gt;
          &lt;h1&gt;Contact &lt;strong&gt;Me&lt;/strong&gt;&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--End Contact--&gt;
  
    &lt;div class="footer navbar-fixed-bottom" id="footer" align="center"&gt;
      
    &lt;div class="copyright p"&gt;© 2016 &lt;a href="www.sanjeetshukla.me"&gt;Sanjeet Shukla&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>