Hello there! I am brand new to HTML and trying to figure out how to position and size an item relative to its container. I found this code snippet (https://codepen.io/Tectonics0x3F/pen/EfAgr) where changing the top and left percentages affects the box's position within the container, and adjusting height and width changes the size proportionally. However, when I try to replicate this in my own code, it doesn't seem to work properly. It looks like the boxes are not truly inside the container, but I'm not sure how to fix this issue. Just a note, I am trying to create a menu with these boxes within the container. Thank you for any help provided and apologies for any language barriers.
Here are snippets of my codes:
body{
background-image:url('../images/bg24.jpg');
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
line-height: 1.6em;
margin:0;
background-repeat:repeat;
margin: auto;
}
#container {
height:70%;
width:90%;
margin:auto;
top:25%;
left:5%;
border: 5px solid white;
position:relative;
}
.button {
background-color: #474B4F;
border: 2px solid Black;
color: white;
padding: 5% 5%;
text-align: center;
text-decoration: none;
display: inline;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
box-sizing: border-box;
}
#button1{
top: 0;
left: 0;
position:absolute;
}
#button2{
margin-top:0;
margin-left: 25%;
position: absolute;
}<body>
<div id="container">
<div id="button1">
<a href="Somepage.html" class="button">clickme1</a>
<div id="button2">
<a href="Somepage2.html" class="button">clickme2</a>
</div>
</div>
</body>