I have a to-do list project where i have a side bar that will slide in from the right. However, the side bar (cutomization-bar in the code) doesn’t slide in the whole way so that there is some buttons that you can’t access.

I have tried some things that i could show in a code block:

/* Add animation for the customization tab */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

0%; /* Start off-screen */
.customization-tab {
  display: none; /* Initially hide the customization tab */
  width: 200px; /* Set the width of the customization tab */
  background-color: #f2f2f2; /* Background color for the customization tab */
  padding: 20px; /* Add some padding */
  border-radius: 5px; /* Add border radius for rounded corners */
  position: fixed; /* Fix the position */
  top: 0; /* Position from the top */
  right: -10}

.customization-tab.open {
  animation: slideIn 2s forwards; /* Apply the animation */
  right: 0; /* Slide in from the right */
  margin-right: 15px
}

I where expecting it to slide in the whole way an not only part of the way that it does now