Unfortunately, I am unable to provide a perfect explanation for the title's meaning. If you'd like to test the code, please visit
I aim to ensure that the crack and box fit properly regardless of screen size.
While it fits on my monitor, the crack shifts when the screen size is adjusted.
.parent-container{
margin: auto;
margin-top: 2vh;
width: 67vw;
height: 85.81vh;
border-top: 2px black solid;
border-left: 2px black solid;
border-right: 2px black solid;
}
.container{
display: flex;
}
.item:nth-child(1){
flex: 1;
height: 28vh;
border-right: 2px black solid;
border-bottom: 2px black solid;
font-family: 'Indie Flower', cursive;
}
.item:nth-child(2){
flex: 2.6;
height: 28vh;
border-bottom: 2px black solid;
font-family: 'Indie Flower', cursive;
}
.item:nth-child(3){
flex: 1;
height: 28vh;
border-left: 2px black solid;
border-bottom: 2px black solid;
font-family: 'Indie Flower', cursive;
}
img{
width: 100%;
margin-top: -50%;
}<div class = "parent-container">
<div class = "container">
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
</div>
<img src="http://dainielhhong.com/page1.html">
</div>The issue may be due to the large SVG size, but I am uncertain about the exact problem.