title: html page goes crazy when resizing the browser
body: <p>So I want to build a modal that contains 3 pages and a progress bar that changes whenever I click on a button. The problem is when I resize my browser the progress bar goes out from the modal. </p>
  
  <p>Here is my code: </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-js lang-js prettyprint-override"><code>$( document ).ready(function() {
    $('.trigger').click(function() {
       $('.modal-wrapper').toggleClass('open');
      $('.page-wrapper').toggleClass('blur');
       return false;
    });
    $('.go').click(function () {
             $('.pg2').toggleClass('active') ;
    }) ;
    $('.gg').click(function () {
             $('.pg3').toggleClass('active') ;
    }) ;
  });
  
  var pageIndex = 1;
  showPages(pageIndex);
  
  function nextPage(n) {
    showPages(pageIndex += n);
  }
  
  function showPages(n) {
    var i;
    var pages = document.getElementsByClassName("pop");
    if (n &gt; pages.length) {pageIndex = 1}
    if (n &lt; 1) {pageIndex = pages.length}
    for (i = 0; i &lt; pages.length; i++) {
        pages[i].style.display = "none";
    }
  
    pages[pageIndex-1].style.display = "block";
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(https://fonts.googleapis.com/css?family=Courgette|Oswald);
  
  
  @import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
  
  html, body{
    width:100%;
    height:100%;
    margin:0;
  }
  .sent{
    font-family: Dancing Script, Georgia, Times, serif;
  
    font-size :35px  ;
    text-align: center;
    color:#01bce5 ;
  }
  
  .page-wrapper{
    width:100%;
    height:100%;
   background:url(http://feelgrafix.com/data/background/background-1.jpg) center no-repeat;
    background-size:cover;
  }
  
  .blur{
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
  }
  
  a.btn{
    width:150px;
    display:block;
    margin:-25px 0 0 -75px;
    padding:1em 0;
    position:absolute;
    top:50%; left:50%;
    font:1.125em 'Arial', sans-serif;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    color:#fff;
  
    background:rgba(217,67,86,1);
  }
  a.go{
    width:150px;
    display:block;
    margin:-25px 0 0 -75px;
    padding:1em 0;
    position:absolute;
    top:60%; left:80%;
    font:1.125em 'Arial', sans-serif;
    font-weight:700;
    text-align:center;
    text-decoration:none;
    color:#fff;
    background:rgba(217,67,86,1);
  }
  a.gg{
    width:200px;
    height: 10px;
    display:block;
    margin:-25px 0 0 -250px;
    padding:1em 0;
    position:absolute;
    top:70%; left:80%;
    font:1.125em 'Arial', sans-serif;
    font-weight:400;
    text-align:center;
    text-decoration:none;
    color:#fff;
    background:rgba(217,67,86,1);
  }
  .modal-wrapper{
    width:100%;
    height:100%;
    position:fixed;
    top:0; left:0;
    background:rgba(255,257,153,0.75);
    visibility:hidden;
    opacity:0;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
    overflow: hidden;
    list-style-position: inside;
  
  }
  
  .modal-wrapper.open{
    opacity:1;
    visibility:visible;
    overflow: hidden;
    list-style-position: inside;
  }
  
  .modal{
    width:600px;
    height:600px;
    display:block;
    margin:50% 0 0 -300px;
    position:relative;
    top:40%; left:50%;
    background:#fff;
    opacity:0;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    overflow: hidden;
  word-break:break-all;
  }
  
  .modal-wrapper.open .modal{
    margin-top:-200px;
    opacity:1;
  }
  
  .head{
    width:90%;
    height:32px;
    padding:1.5em 5%;
    overflow:hidden;
    background:#01bce5;
  }
  
  .btn-close{
    width:32px;
    height:32px;
    display:block;
    float:right;
  }
  
  .btn-close::before, .btn-close::after{
    content:'';
    width:32px;
    height:6px;
    display:block;
    background:#fff;
  }
  
  .btn-close::before{
    margin-top:12px;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    transform:rotate(45deg);
  }
  
  .btn-close::after{
    margin-top:-6px;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    transform:rotate(-45deg);
  }
  
  .content{
    padding:5%;
  }
  .flat-button {
    position: relative;
    width: 150px; height: 60px;
    background: #E74C3C;
    margin: 0 auto;
    margin-top: 40px;
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
    transition: color .3s;
    /* Typo */
    line-height: 60px;
    text-align: center;
    color: #fff;
  }
  
  .flat-button:after {
    position: absolute;
    top: 90%; left: 0;
    width: 100%; height: 100%;
    background: #C0392B;
    content: "";
    z-index: -2;
    transition: transform .3s;
  }
  
  .flat-button:hover::after {
    transform: translateY(-80%);
    transition: transform .3s;
  }
  
  .round-image{
    border-radius:100%;
   height: 280px;
   margin: 0 auto;
   overflow:hidden;
   width: 280px;
  }
  
  .descrip{
    padding:1em 0;
    position:absolute;
    top:40%;
    left:70%;
    font:1.125em 'Arial', sans-serif;
  
    text-align:center;
    text-decoration:none;
    margin:-25px 0 0 -75px;
  
  }
  .progressbar {
        counter-reset: step;
    }
    .progressbar li {
        list-style-type: none;
        width: 15%;
        float: left;
        font-size: 12px;
        position: relative;
        text-align: center;
        text-transform: uppercase;
        color: #7d7d7d;
          left:350px;
          height: 10px;
  
  
    }
    .progressbar li:before {
        width: 30px;
        height: 30px;
        content: counter(step);
        counter-increment: step;
        line-height: 30px;
        border: 5px solid #7d7d7d;
        display: block;
        text-align: center;
        margin: 200px auto 10px auto;
        border-radius: 50%;
  
  
    }
    .progressbar li:after {
        width: 100%;
        height: 7px;
        content: '';
        position: absolute;
        background-color: #7d7d7d;
        top: 215px;
        left: -50%;
    }
    .progressbar li:first-child:after {
        content: none;
    }
    .progressbar li.active {
        color: green;
    }
    .progressbar li.active:before {
        border-color: #01bce5;
    }
    .progressbar li.active + li:after {
        background-color: #01bce5;
    }
  .titre{
     text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="./main.css"&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="./fontawesome/css/font-awesome.min.css"&gt;
  &lt;link rel="stylesheet" href="http:////fonts.googleapis.com/css?family=Dancing+Script"&gt;
  
  
      &lt;title&gt;&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="page-wrapper"&gt;
    &lt;a class="btn trigger" href="javascript:;"&gt;Popup!&lt;/a&gt;
  &lt;/div&gt;
  &lt;div class="modal-wrapper"&gt;
    &lt;div class="modal"&gt;
      &lt;div class="head"&gt;
        &lt;a class="btn-close trigger" href="javascript:;"&gt;&lt;/a&gt;
  
      &lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;div class="container"&gt;
            &lt;div class="pop fade"&gt;
                &lt;div class="text"&gt;
                       &lt;h1 class='sent'&gt;FIRST PAGE  &lt;/h1&gt;
                &lt;/div&gt;
  
  
                 &lt;img src="http://i.imgur.com/2ZgHKbQ.jpg" alt="Beach in your dream" class="round-image" &gt;
  
  
                 &lt;p class='descrip'&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit &lt;/p&gt;
               &lt;a class="btn go" href='javascript:;' onclick='nextPage(1);'&gt;GO!&lt;/a&gt;
  
  
  
  
            &lt;/div&gt;
            &lt;div class="pop fade"&gt;
                &lt;div class="text"&gt;
                       &lt;h3 class="titre"&gt;Lorem ipsum dolor sit amet&lt;/h3&gt;
                &lt;/div&gt;
  
            &lt;a class="btn gg" href='javascript:;' onclick='nextPage(1);'&gt;GO!&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="pop fade"&gt;
                &lt;div class="text"&gt;
                       &lt;h1 class='sent'&gt;Inscription&lt;/h1&gt;
                &lt;/div&gt;
  
  
            &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;ul class="progressbar"&gt;
       &lt;li class="active"&gt;&lt;/li&gt;
       &lt;li class='pg2'&gt;&lt;/li&gt;
       &lt;li class="pg3"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
    &lt;/body&gt;
    &lt;script  src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"&gt;  &lt;/script&gt;
    &lt;script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="./index.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>