Struggling to contain the character div within the game div in my project. Seeking advice as I am relatively new to CSS and would appreciate any tips or feedback.
* {
padding: 0;
margin: 0;
}
#game {
margin: auto;
width: 400px;
height: 500px;
border: 1px solid black;
overflow: hidden;
}
#block {
width: 50px;
height: 500px;
background-color: black;
position: relative;
left: 400px;
animation: block 2s infinite linear;
}
@keyframes block {
0% {
left: 400px;
}
100% {
left: -50px;
}
}
#character {
height: 50px;
width: 50px;
background-color: black;
margin: auto;
float: left;
}<div id="game">
<div id="block"></div>
<div id="character"></div>
</div>Experience the issue first-hand with this JSFiddle: https://jsfiddle.net/skltnboss/Ljb845h3