DIVs are moving from their positions when zooming out of the page - html

Question

So basically my problem is when I zoom in-out of the page, some DIVs move out from their position which causes my layout to break. I used the position relative and absolute properties as well as used % instead px as my units in positioning. I've gone through some articles saying that it's not favorable to use position absolute and that this was an expected behavior but I couldn't seem to find an answer to my question. I also tried find a way to do it using CSS Flexbox but i couldn't find a direct answer to my problem.
My expected layout should be something like https://snipboard.io/Mr8sNv.jpg but as I said before, it breaks when zooming in/out.
Here is my HTML.
<div class="Container">
<div class="background">
<div class="Space"></div>
<p class="Branding_Design">BRANDING & DESIGN</p>
<div class="Project_One">Project One</div>
<div class="SliderBOX"></div>
<div style="position:absolute; right: 8%; top: 59%;">
<div class="ProjectDetailsContainer">
<p class="Project_Details">PROJECT DETAILS</p>
</div>
</div>
<div style="position:absolute; right: 12%; top: 62.5%;">
<div class="ViewSlidesContainer">
<p class="View_Slides">VIEW SLIDES</p>
</div>
</div>
</div>
</div>
Here is my CSS
.Container {
width: 100%;
position: relative;
height: 721px;
}
.background {
background: black;
width: 100%;
height: 100%;
}
h3 {
text-align: center;
}
.Space {
width: 1000px;
height: 100px;
background: red;
position: relative;
z-index: -1;
}
.SliderBOX{
height: 525px;
width: 50%;
background: yellow;
margin: 0 auto;
}
.Branding_Design {
font-size: 10px;
font-weight: 500;
font-family: 'Open Sans';
color: #f7ac53;
letter-spacing: 0.5px;
position: absolute;
top: 39%;
left: 12%;
}
.Project_One {
color: white;
font-family: "Merriweather";
font-size: 39px;
font-weight: 300;
position: absolute;
top: 45%;
left: 14%;
z-index: 1;
}
.ProjectDetailsContainer {
position: relative;
}
.Project_Details {
color: white;
font-family: 'Open Sans';
font-weight: 400;
font-size: 11px;
}
.ViewSlidesContainer {
position: relative;
}
.View_Slides {
color: white;
font-family: 'Open Sans';
font-weight: 400;
font-size: 11px;
}
I also included my code in jsfiddle in order to make it easier to go through my code
https://jsfiddle.net/wa3bLx1h/22/
What am I doing wrong?

Answer 1

I think believe the code below, is what you're looking for correct? Flex-box would the solution to remedy this problem. I would suggest just go thru MDN tutorials and mess around with each properties of flex-box. Your problem helped me understand Parent and Child containers better now.
<div class="container">
<div class="background">
<div class="space"></div>
<div class="textCon1">
<div class="p-text-1">
<p class="brandingDesign"> BRANDING & DESIGN</p>
</div>
<div class="p-text-2">
<p class="projectOne">Project One</p>
</div>
</div>
<div class="sliderBox"></div>
<div class="projectDetailContainer">
<div class="p-text-3">
<p class="projectDetails"> PROJECT DETAILS</p>
</div>
<div class="viewSlideContainer">
<p class="viewSlides">VIEW SLIDES</p>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.container {
height: 721px;
width: 100%;
}
.background {
height: 100%;
width: 100%;
background: black;
display: flex;
align-items: center;
justify-content: center;
}
.sliderBox {
height: 525px;
width: 50%;
display: flex;
background: yellow;
}
.textCon1 {
display: flex;
flex-direction: column;
margin-right: 10px;
}
.brandingDesign {
font-size: 10px;
font-weight: 500;
font-family: "Open Sans";
color: #f7ac53;
letter-spacing: 0.5px;
margin-right: 100px;
padding: 5px;
}
.projectOne {
color: white;
font-family: "Merriweather";
font-size: 39px;
font-weight: 300;
margin-left: 50px;
padding: 5px;
}
.projectDetailContainer {
display: flex;
flex-direction: column;
margin-top: 200px;
margin-left: 100px;
}
.projectDetails {
color: white;
font-family: "Open Sans";
font-weight: 400;
font-size: 11px;
margin-left: 50px;
padding: 10px;
}
.viewSlides {
color: white;
font-family: "Open Sans";
font-weight: 400;
font-size: 11px;
padding: 5px;
}