Sidebar elements pushed outside the sidebar when padding added - reactjs

Question

Note: becasue I am a new user, I cannot embed photos yet. The photos are in links generated by Stack overflow below.
The below is the design I am trying to achieve,
However, the below is currently what is happening
As you can see, the sidebar list is appearing to go outside the sidebar itself when the padding is added.
How can I manipulate my CSS to alter?
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
}
.Sidebar {
height: 100%;
width: 250px;
background-color: white;
border-right: 1px solid;
padding-left: 15px;
}
.SidebarList {
height: auto;
width: 100%;
padding-left: 15px;
font-size: 18px;
border: 2px #FD954E;
border-right: 1px solid;
}
.SidebarList .row {
width: 100%;
height: 50px;
background-color: white;
list-style-type: none;
margin: 0%;
display: flex;
color: #A7ACB6;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.SidebarList .row:hover {
cursor: pointer;
background-color: #E7E7E7 ;
}
.SidebarList #active {
background-color: white;
color: #FD954E
}
.row #icon {
flex: 30%;
display: grid;
place-items: center;
}
.row #title {
flex: 70%;
}
.Logo {
padding-left: 40px;
padding-top: 25px;
}