Is there a way to center a Square within the border of another div? I have attempted the following method:
.container {
position: relative;
background-color: blue;
}
.square {
position: absolute;
height: 50px;
width: 50px;
border-radius: 0%;
background-color: yellow;
left: -5%;
top: 25%;
}
.logoOnTheRight {
max-height: 100px;
max-width: 100px;
}
.logoOnTheRight img {
width: 100%;
}
body {
padding: 50px;
}<div class="container d-flex flex-row-reverse">
<div class="square"></div>
<div class="logoOnTheRight p-2">
<img src="https://i.imgur.com/sPuqd31g.jpg" />
</div>
</div>When in fullscreen mode, the Square aligns with the border as expected. However, upon resizing the page, the Square's position changes and it no longer stays on the border. I've observed that specifying the width of the container cont in pixels resolves this issue. But I want the container cont to be 100% width. How can I ensure that the Square remains on the border of cont during page resizing?