breaking the design when minimizing the screen - html

Question

when the screen gets smaller on my website, the elements go to irrelevant places. I did some research and thought I could remove it using '%' but it didn't work.
This is 1 scale:
This is 0.25 scale
/*my container*/
.container-home{
width: 100%;
height: 60rem;
display: flex;
align-items: center;
}
/*
the articles are here*/
.words {
display: flex;
flex-direction: column;
justify-content: center;
width: 60%;
height: 100vh;
margin-left: 25vh;
transition: 1.5s;
}
.header{
font-size: 5rem;
font-weight: 500;
}
.description {
display: block;
margin-top: 3rem;
font-size: 2rem;
}
/*explore text span*/
.explore{
margin-top: 2.5rem;
width: 15rem;
height: 4rem;
text-align: center;
display: block;
font-size: 2rem;
border: 0.1rem solid #000;
border-radius: 2.5rem;
margin-left: 1.5rem;
position: relative;
z-index: 1;
}
/*explore text a*/
.explore a{
display: block;
text-decoration: none;
font-size: 2rem;
color: #000;
text-align: center;
margin-top: 0.7rem;
}
.explore:hover {
border-color: transparent;
text-align: center;
transition: 1s;
transform: translateY(0.6rem) translateX(-1rem);
}
/*colored rectangle under text explore*/
.explore-hover{
display: inline;
position: absolute;
width: 15rem;
height: 4rem;
border-radius: 2.5rem;
background-color: #f1e0d4;
top: 42rem;
}
/*circle , solid circle and image in this*/
.image-design{
width: 100%;
height:100vh;
}
.circle{
position: relative;
width: 100%;
height: 100%;
clip-path: circle(300px at center);
background-color: #d7e7f1;
margin-top:8rem;
}
.solid-circle{
position: absolute;
width: 60rem;
height: 60rem;
border-radius: 50%;
background-color: transparent;
top: 30%;
left: 28%;
border: 1px solid #3398d7;
}
/*I created it to put an image on top of the circles*/
.conainer-image-design{
position: absolute;
width: 100%;
left: 25rem;
height:100vh;
}
.image{
position: relative;
top: 25%;
left: 12%;
}
<div class="container-home">
<div class="words">
<span class="header">
Handcrafted<br>
& ethically sourced
</span>
<span class="description">A collection inspired by old-world charm, crafted
<br>with moisannites and diamonds.
</span>
<span class="explore">Explore→</span>
<div class="explore-hover"></div>
</div>
<div class="image-design">
<div class="conainer-image-design">
<div class="circle"></div>
<div class="solid-circle"></div>
</div>
<span class="image"><img src="./ring.png"></span>
</div>
</div>
what do you recommend to give the measurements, I mainly use rem or % .which is better to keep the image intact?