title: My website page shrinks and I think issue in CSS
body: <p>Please suggest me or edit this code. I am searching and trying to fix the problem. My page shrinks when I maximize or restore it. Please look at my CSS code. I am not allowed to use any framework like bootstrap. I am pasting my fiddle code here. If possible please correct it. </p>
  
  <p>CSS code is </p>
  
  <pre><code>#container {
      height: 400px;
      position: relative;
      margin: 0 auto;
      width: 80%;
      display:block;
  }
  
  
  .container-1 input#search{
      width: 30%;
      height: 40%;
      background:gray;
      border: none;
      font-size: 12pt;
      float: right;
      display:block;
      padding-right: 100%;
  
  
  }
  
  
  .form-wrapper {
  
      padding: 15px;
      position: absolute;
      top:10%;
      right: 50px;
      background:grey;
  
  }
  
  #image {
      position: absolute;
      left: 0;
      top: 0;
  }
  #text {
      position: absolute;
      color: white;
      text-align: center;
      width: 45em;
      word-wrap: break-word;
      font-size:25px;
      left: 150px;
      top: 600px;
      font-family: "Trebuchet MS";
  }
  
  #about {
      position: absolute;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size:44px;
      left: 550px;
      top: 520px;
      font-family: "Trebuchet MS";
  }
  
  
  #con {
      position: absolute;
      color: white;
      font-size:44px;
      font-weight: bold;
      left: 250px;
      top: 550px;
      font-family: "Trebuchet MS";
  }
  
  
  #project {
      position: absolute;
      color: white;
      text-align: center;
      margin-left: 100px;
      font-size:44px;
      font-weight: bold;
      top: 500px;
      font-family: "Trebuchet MS";
  }
  
  #projectp {
      position: absolute;
      color: white;
      text-align: center;
      margin-left: 300px;
      font-size:30px;
      font-weight: bold;
      top: 600px;
      font-family: "Trebuchet MS";
  }
  
  #projectpc {
      width: 40em;
      word-wrap: break-word;
      text-align: center;
      font-size:30px;
      font-family: "Trebuchet MS";
  }
  #p{
      text-align: center;
      font-size:30px;
      font-family: "Trebuchet MS";
      font-style: italic;
  
  
  }
  
  #pr{
      text-align: center;
      font-size:40px;
      font-family: "Trebuchet MS";
      font-weight: bold;
      border: 2px solid #000000;
      border-width: medium;
      margin-left: 500px;
      margin-right: 500px;
  
  
  }
  
  div.img {
      margin: 65px;
      float: left;
      width: 180px;
  }
  
  
  div.img img {
      width: 100%;
      height: auto;
  }
  
  div.desc {
      text-align: center;
      font-size: 30px;
      font-family: "Trebuchet MS";
      font-weight: bold;
  }
  
  
  
  
  #contact {
      position: absolute;
      color: white;
      text-align: center;
      font-size:44px;
      left: 570px;
      top: 480px;
  }
  
  #contact1 {
      position: absolute;
      color: white;
      text-align: center;
      width: 15em;
      word-wrap: break-word;
      font-size:30px;
      left: 520px;
      top: 560px;
  }
  
  
  h1,h2,h3,h4,h5,h6,p{
      font-family: "Trebuchet MS";
  }
  h1 {
      text-align: center;
      font-size:44px ;
      display:block;
  }
  h2 {
      text-align: center;
      font-size:30px;
      display:block;
      font-weight: bold;
  }
  
  
  #left {
      color: rgba(16, 9, 18, 0.57);
      position: absolute;
      top: 1500px;
      font-family:Trebuchet MS
      color: white;
      text-align: center;
      width: 23em;
      word-wrap: break-word;
      font-size:20px;
      display:block;
  
  }
  
  
  p.ex {
      height: 100px;
      width: 100px;
      font-family:Trebuchet MS;
      display:block;
  }
  
  h3{
      text-align:center;
      display:block;
  }
  
  
  h4{
      text-align:center;
      display:block;
      font-size:20px;
  }
  
  
  
  
  
  #img_cont a {
      display: table-cell;
      text-align: center;
      width: 26%;
  }
  
  
  #imagepr {
      margin-top: 100px;
      margin-left: 250px;
  }
  #image1 {
      padding-top: 100px;
      padding-left: 520px;
      height:40px;
  }
  
  #image2 {
      margin-right:10px;
      margin-left:52px;
      height:40px;
  }
  
  #image3 {
      margin-right:10px;
      margin-left:52px;
      height:40px;
  
  }
  #image4 {
      margin-right:10px;
      margin-left:52px;
      height:40px;
  
  }
  
  h3 {
      position: absolute;
      left: 800px;
      top: 1880px;
      display:block;
  }
  
  
  .heading{float:right;
      width: 16em;
      word-wrap: break-word;}
  
  .heading1{float:right;
      width: 22em;
      word-wrap: break-word;
      margin-top: -200px;
  
  }
  
  #image24 {
      margin-right:10px;
      margin-left:72px;
  
  
  }
   h2.pos_left {
       color: rgba(16, 9, 18, 0.57);
       position: absolute;
       top: 1450px;
      margin-left: 100px;
  
   }
  
  
  
  
    h2.pos_right {
        word-wrap: break-word;
        color:rgba(16, 9, 18, 0.57);
        position: absolute;
        left: 670px;
        top: 1450px;
        display:block;
        margin-left:150px;
    }
  #right {
      color: rgba(16, 9, 18, 0.57);
      position: absolute;
      top: 1530px;
      font-family:Trebuchet MS
      color: white;
      text-align: center;
      width: 23em;
      word-wrap: break-word;
      font-size:20px;
      display:block;
      margin-left:680px;
  
  }
  
  
  footer {
      height: 150px;
      font-size: 18px;
  
  
  }  footer a {
         color: #100912;
         text-decoration: none;
     }
  
  
  #footer ul {
      text-align: center;
  
  
  
  
  }
  #footer li {
      list-style-type: none;
      display: inline-block;
      color: #18210b;
  
  
  
  }
  </code></pre>
  
  <p>HTML code is</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;head&gt;
  
  
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;DROPS and Crops&lt;/title&gt;
  
  
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
      &lt;meta name="viewport" content="width=device-width"/&gt;
  
  
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link rel="stylesheet" href="css/menu.css"&gt;
      &lt;link rel="stylesheet" href="css/responsiveslides.css"&gt;
      &lt;script src="js/jquery183.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/responsiveslides.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
  
          $(function () {
            // Slideshow
            $("#slider").responsiveSlides({
              auto: true,
              pager: false,
              nav: true,
              speed: 500,
              namespace: "callbacks",
              before: function () {
                $('.events').append("&lt;li&gt;before event fired.&lt;/li&gt;");
              },
              after: function () {
                $('.events').append("&lt;li&gt;after event fired.&lt;/li&gt;");
              }
            });
          });
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrap-body"&gt;
  
  &lt;!--////////////////////////////////////Header--&gt;
  &lt;header&gt;
      &lt;div class=""&gt;
          &lt;div class="wrap-header"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-1-3"&gt;
                      &lt;div class="wrap-col"&gt;
                          &lt;div class="logo"&gt;&lt;a href="#"&gt;&lt;img src="images/drops.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/header&gt;
                  &lt;div class="col-1-3 offset-1-3"&gt;
                      &lt;div class="wrap-col"&gt;
                          &lt;form class="form-wrapper cf" &gt;
                              &lt;input type="text" placeholder="Search here..." required&gt;
  
  
                      &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;div&gt;
              &lt;nav id="menu-wrap"&gt;&lt;div id="menu-trigger"&gt;Menu&lt;/div&gt;
              &lt;ul id="menu" style="display: none;"&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="index.html"&gt;About&lt;/a&gt;
  
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="single.html"&gt;Projects&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="single.html"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  
          &lt;div class="slider"&gt;
  
              &lt;div class="callbacks_container"&gt;
                  &lt;ul class="rslides" id="slider"&gt;
                      &lt;li&gt;
                          &lt;div style="text-align: center"&gt;&lt;img src="images/1.jpg" width="100" height="100" alt="image"/&gt;&lt;/div&gt;
  
                          &lt;p id="text"&gt;
                              In 2050, we are projected to have 9 billion on this planet. These people will eat and drink just like we do..
                          requiring a doubling of food production. But food and water security already are the largest challenges for a
  
                                             thriving global population.
  
  
  
  
  
                              Drops and Crops is a network of students, researchers, social innovators and entrepreneurs trying to tackle this
                               great challenge of our lifetimes through partnerships and collaborations. Our network is supported by the Water
  
  
                                                     for Food Institute at the University of Nebraska.
                          &lt;/p&gt;
  
  
                      &lt;/li&gt;
  
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
  
  
          &lt;h1&gt;LEARN MORE&lt;/h1&gt;
  
  &lt;h2&gt;about our current&lt;a href="single.html"&gt; Projects&lt;/a&gt; &lt;/h2&gt;
  
  
      &lt;!--////////////////////////////////////Project Section--&gt;
  
  &lt;div id="header"&gt;
      &lt;img id="imag23" src="images/banner-img1.jpg"alt="img"  &gt;
      &lt;img id="imag24" src="images/banner-img2.jpg"alt="img" &gt;
  
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;h2 class="pos_left"&gt; SYRIAN CRISIS &lt;/h2&gt;
      &lt;p id="left"&gt; We are organizing a conference in April 2016 on
       water and humanitarian aspects of the Syrian crisis.
       Click &lt;a href="projectc.html"&gt;here&lt;/a&gt; to learn about the crisis and our
       conference.&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;div&gt;
  &lt;h2 class="pos_right"&gt;SMALLHOLDER &lt;/br&gt; AGRICULTURE&lt;/h2&gt;
  &lt;p id="right"&gt;We are organizing a workshop in April 2016 on smallholder irrigation in Sub-Saharan Africa. Click here
   to learn about the challenge of agriculture in the
  region and our workshop.&lt;/p&gt;
      &lt;/div&gt;
  &lt;div&gt;
  
  &lt;h1&gt; Latest From Our &lt;a href="single.html"&gt;Blog&lt;/a&gt;&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;!--////////////////////////////////////Footer--&gt;
  
  
      &lt;img src="images/2.jpg" class="myImage" alt="images/2"/&gt;
      &lt;h2 class="heading"&gt;HOW MUCH DO YOU KNOW ABOUT THE WORLD'S BIGGEST  HUMANITARIAN CRISIS?  &lt;/h2&gt;
  
  
      &lt;h4 class="heading1"&gt;Click here to see our more recent infographic on humanitarian aspects of the Syrian crisis &lt;/h4&gt;
  
  
  
  
  
      &lt;/div&gt;
  
  
  
  
  
  &lt;!--////////////////////////////////////Social Media--&gt;
  &lt;a href="https://www.facebook.com/Drops-and-Crops-705675629533002/?fref=ts" target="_blank"&gt;&lt;img id="image1" src="http://waterforfood.nebraska.edu/wp-content/uploads/2013/07/facebook.png" alt="image"&gt;&lt;/a&gt;
  &lt;a href="https://twitter.com/drops_and_crops" target="_blank"&gt;&lt;img id="image2" src="http://waterforfood.nebraska.edu/wp-content/uploads/2013/07/twitter.png" alt="image"&gt;&lt;/a&gt;
  &lt;a href="https://www.pinterest.com/DropsandCrops/" target="_blank"&gt;&lt;img id="image3" src="http://waterforfood.nebraska.edu/wp-content/uploads/2014/01/pinterest.png" alt="image"&gt;&lt;/a&gt;
  &lt;a href="https://www.linkedin.com/company/water-for-food-institute-at-university-of-nebraska" target="_blank"&gt;&lt;img id="image4" src="http://waterforfood.nebraska.edu/wp-content/uploads/2015/07/linkedin.png" alt="image"&gt;&lt;/a&gt;
  
  &lt;!--   Footer          --&gt;
  
  
  
  
  &lt;footer&gt;
      &lt;div id="footer"&gt;
  
          &lt;ul class="footer" id="footersection"&gt;
              &lt;li&gt;&lt;a href="#"&gt;ABOUT US | &lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;CREDITS | &lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;waterforfood.nebraska.edu  &lt;/a&gt;&lt;/li&gt;
  
  
          &lt;/ul&gt;
      &lt;/div&gt;
  
  &lt;/footer&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/bsp27L9s/3/" rel="nofollow">https://jsfiddle.net/bsp27L9s/3/</a></p>