Divs are moving around when resizing/zooming-in/out page

If i set position:absolute it stops moving and messing around page, while zooming(in/out) the page. but the location of div are automatically changing, and all the divs are mixing together in one location. any ideas? hope my question was clear. none of the solutions I found worked for me. I have this website I am making, and the div elements move around when I zoom-in and zoom-out the webpage. Here is the HTML code:

<style>
               /* KEYFRAMES */


  /* IDS */
      #changepos{
        position:relative;
        top:-250px;
      }
      #readmore{
        position:relative;
        top:-260px;
        right:380px;
        text-decoration-line:none;
        border-radius:20px;
      }
      #movetext{
        position:relative;
        right:395px;
      }
    #wholepage{
      width:500px;
      margin-left:auto;
      margin-right:auto;
    }
    #hello{
      position:relative;
      left:20px;
    }
    #hellos{
             position:relative;
             left:100px;
    }
    /* Body Visual */
    input{
      width:50%;
      overflow:hidden;
    }
    main{
      background-color:lightgray;
        min-height: 100%;
        min-width:100%;
        background-size:1550px 800px;
        background-repeat: no-repeat;
        overflow-x:hidden;
    }

  body{
        background-image:url('https://images.unsplash.com/photo-1523821741446-edb2b68bb7a0?ixlib=rb-1.2.1&w=1000&q=80');
        min-height: 100%;
        min-width:100%;
        background-size:1550px 800px;
        background-repeat: no-repeat;
        overflow-wrap:hidden;
        overflow-x:hidden;

        
  


  }
  /* Classes */
        .typewriter {
    font-family: Courier, monospace;
  display: inline-block;
}

.typewriter-text {
    display: inline-block;
    overflow: hidden;
    letter-spacing: 2px;
  animation: typing 5s steps(30, end), blink .75s step-end infinite;
    white-space: nowrap;
    font-size: 30px;
    font-weight: 700;
    border-right: 4px solid orange;
    box-sizing: border-box;
}

@keyframes typing {
    from { 
        width: 0% 
    }
    to { 
        width: 100% 
    }
}

@keyframes blink {
    from, to { 
        border-color: transparent 
    }
    50% { 
        border-color: orange; 
    }
}
     }
  .forms{
    position:relative;
    left:50px;
  }
  .lineh{
         border-bottom: 4px solid lightgray;
         width:1400px;
         height:3px;
         cursor:default;
         position:relative;
         border-radius:100px;
         top:-11px;
      }
  .lines{
     border-bottom: 2px solid none;
     width:1000px;
         height:3px;
         background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
         cursor:default;
         position:relative;
         border-radius:100px;
         top:-195px;
         right:400px;
  }
  .line{
     border-bottom: 2px solid pink;
     width:1000px;
         height:3px;
         background-image:url('https://thelogocompany.net/wp-content/uploads/2016/05/gradient.jpg');
         cursor:default;
         position:relative;
         border-radius:100px;

    
    }
  .movepic{
    position:relative;
    left:270px;
    top: -200px;
    right:0px;
    bottom:0px;
    cursor:default;
    opacity:1;
    transition:1s;
  }
  .movepic:hover{
    transform:translateX(20px);

  }
  .joint{
    font-family:monospace;
    font-size:10px;
    text-decoration-line:none;
    text-decoration-color:none;
    text-decoration:none;
    color:white;
  }
    .transp{
      position:relative;
      border-style:solid;
      border-radius:50px;
      background-color:none;
      opacity:0.6;
      cursor:pointer;
      border:none;
      overflow:hidden;
      transition:1s;
      border-image-width: 5px;

    }
    .transp:hover{
      transform:translate(30px);
      opacity:1;
      transform-style: preserve-3d;
      
    }
.container{
  text-align: center;
  margin-top: 360px;
}

.btn{
  border: 1px solid #3498db;
  background: none;
  padding: 10px 20px;
  font-size: 20px;
  font-family:monospace;
  cursor: pointer;
  margin: 10px;
  transition: 0.8s;
  position: relative;
  overflow: hidden;
}
.btn1,.btn2{
  color: #3498db;
}
.btn3,.btn4{
  color: #fff;
}
.btn1:hover,.btn2:hover{
  color: #fff;
}
.btn3:hover,.btn4:hover{
  color: #3498db;
}
.btn::before{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 0%;
  background: #3498db;
  z-index: -1;
  transition: 0.8s;
}
.btn1::before,.btn3::before{
  top: 0;
  border-radius: 0 0 50% 50%;
}
.btn2::before,.btn4::before{
  bottom: 0;
  border-radius: 50% 50% 0 0;
}
.btn3::before,.btn4::before{
  height: 180%;
}
.btn1:hover::before,.btn2:hover::before{
  height: 180%;
}
.btn3:hover::before,.btn4:hover::before{
  height: 0%;
}

        </style>
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Roma's Portfolio</title>
    <link rel="stylesheet" href="../sait/css/main.css">
    <link rel="icon" type="image/png" href="https://bluemountmedia.com/wp-content/uploads/2020/07/BMM-favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta http-equiv="refresh" content="350">
    <style>
     .putebi{
        width: 100%;
        border-radius:4px;
        padding:12px;
        border:1px solid #d9a7c9;
        box-sizing: border-box;
        margin-top:6px;
        margin-bottom:16px;
        resize:vertical;

        
     }
     .med{
        position:relative;
        outline:none;
        border-style:none;
        opacity:0.6;
     }
     .med:hover{
        opacity:1;
     }
    .soc{
        animation:socebi 3s;
        outline:none;
        border-style:none;
    }

    @keyframes socebi{
      from{
        opacity:0;
        transform:translateX(-600px);
      }
      to{
        opacity:1;
        transform:translateX(0px);
      }
    }

     .kont{
      animation: animacia 3s;
     
    }

    @keyframes animacia{
      from{
        opacity:0;
        transform:translateX(600px);
      }
      to{
        opacity:1;
        transform:translateX(0px);
      }
    }

    </style>
</head>
<body>

  

    
    
        <div>

    <div style="overflow-x:hidden;"id="hello" class="transp"> <a href="index.html"></a> <a href="index.html" class="joint"><h1>&nbsp;&nbsp;&nbsp;&nbsp;Roma's Portfolio</h1>  </a> </div>
</div>
     <div class="lineh"></div>
     <div class="wholepage"> 
    <div style="text-align:center; text-decoration:none">
    <a style="text-decoration-line:none" class="btn btn1 container" href="index.html">Main Page</a>
    <a style="text-decoration-line:none" class="btn btn1 container">Contact</a>
    <a style="text-decoration-line:none" class="btn btn1 container">Projects</a>
    <a style="text-decoration-line:none" class="btn btn1 container">Subscribe</a> <br> <br><br>
    <div class="typewriter"> 
        <q class="typewriter-text"style="color:pink;text-align:center; font-size:xx-large; font-family:monospace;">I'm looking to expand my portfolio while I'm on top and while I'm young.</q>
        </div><br><br>
    <div style="cursor:default;"class="soc">
            <a style="position:relative; left:640px; outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.facebook.com/profile.php?id=100041975361380"><img class="med" width="50px" src="../sait/images/facebook-logo.png"> </a> <br>
            <a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;" target="_blank" href="https://www.instagram.com/spoiledblueberry/"><img  class="med" width="50px" src="../sait/images/instagram.png"></a><br>
            <a style="position:relative; left:640px;outline:none;border:none;text-decoration:none;"  target="_blank" href="https://github.com/Flowder2333"><img class="med" width="50px" src="../sait/images/github.png"></a><br>
        

    </div>

    <br><br><br>
    </div> 
    </div> 

    </div> 


    

        <div id="wholepage">
        <div id="movetext" style="color:white; font-family:monospace; font-size:large">
            
            <h2 style="color:#64e873;text-shadow:2px 2px" class="line kont">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello!</h2> <br>
            <h3 class="kont" style="text-align:left; font-size:large;">&nbsp;&nbsp;&nbsp; I'm Roma. A Freelance Front End Developer based in &nbsp;&nbsp;&nbsp; Georgia.  I specialise in creating interactive &nbsp;&nbsp;&nbsp;&nbsp;experiences and functional interfaces.I have worked &nbsp;&nbsp;&nbsp;&nbsp;on a multitude of web and print-baseds projects for &nbsp;&nbsp;&nbsp;&nbsp;a range of clients providing Web Design &nbsp;&nbsp;&nbsp;&nbsp;(Illustrator,Photoshop,Kdenlive) and &nbsp;&nbsp;&nbsp;&nbsp;Development(HTML,CSS,MYSQL,Wordpress).</h3> 
        </div>

        <div class="kont movepic"> <img style="border:4px solid lightgray;max-width:100%;border-radius:50%" width="250" height="250"  src="../sait/images/face.jpg" alt="პროფილის ფოტო"></div> 
        <div class="changepos lines kont">
        
        </div>
        <button  id="readmore" class="btn btn3 kont">Read More</button><br><br>
        </div>
         
        <div style="position:relative; top:-180px">
            <form action=""style="text-align:center">
                <h1 style="color:#637478; font-family:monospace; font-size:xx-large;"> Contact Me</h1>
                <div class="typewriter">
                    <h1 class="typewriter-text" style="font-family:monospace;color:#5fbced; font-size:xx-large">Swing by for a cup of coffee, or leave me a message:</h1> 
                </div><br>

                
                <label  style="font-family:;"for="saxeli">Enter Username</label>
                <input  style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px;     margin-bottom:16px;resize:vertical;" id="saxeli" type="text" name="saxeli"><br><br>
                <label  id="email">Enter Email &nbsp;&nbsp;&nbsp;&nbsp;</label>
                <input  style="background-color:#a2ebbf;opacity:0.6;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px;     margin-bottom:16px;resize:vertical;"  id="email" type="email" name="email"><br><br>
                <label  for="free">Enter Text&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                <textarea   style="background-color:#a2ebbf;opacity:0.6;text-align:top;width: 400px; border-radius:4px; padding:12px; border:1px solid #d9a7c9; box-sizing:border-box; margin-top:6px;  margin-bottom:16px;resize:vertical;" id="free" name="free" rows="2" cols="20"></textarea><br>
                <button style="border-radius:20px"type="submit" value="submit" class="btn btn4"> დასტურ ბლიად</button>



            </form>
            <img style="border:3px none pink; border-radius:50%;position:relative;top:-350px;overflow:hidden;" width="350px"  height="350px"src="https://img1.pnghut.com/0/14/16/VHPJfnmcLd/internet-content-management-system-technology-search-engine-optimization-web-design.jpg">
        </div>

    
        
</div>
    


    <footer>
        <p style="color:black; ">All Rights Reserved</p> -->

    </footer>


</body>





</html>



Read more here: https://stackoverflow.com/questions/64900520/divs-are-moving-around-when-resizing-zooming-in-out-page

Content Attribution

This content was originally published by Floyder at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: