Burger menu clickable area too small - css

Question

https://codepen.io/everybodysfeelingwonderland/full/OjyRpM/
For the mobile size of my website my burger icon for the menu has a way too small clickable area, it is only those thin lines.
I also have this problem with other anchors that I'd like to have with a bigger clickable area, but don't want the element itself to become bigger on my page.
<div id="burger-container">
<div id="burger">
<span> </span>
<span> </span>
<span> </span>
</div>
</div>
CSS
#burger-container{
margin: 25px 0 0 0;
width: 50px;
float: right;
padding-right: 70px;
}
#burger{
cursor: pointer;
display: block;
}
#burger span{
background: black;
display: block;
width: 50px;
height: 3px;
margin-bottom: 10px;
position: relative;
top: 0;
transition: all ease-in-out 0.4s;
}
#burger-container.open span:nth-child(2){
width: 0;
opacity: 0;
}
#burger-container.open span:nth-child(3){
transform: rotate(45deg);
top: -13px;
}
#burger-container.open span:nth-child(1){
transform: rotate(-45deg);
top: 13px;
}
}

Answer 1

try adding fixed width and height
#burger {
cursor: pointer;
display: block;
height: 30px;
width: 50px;
}

Answer 2

You can change the CSS like so:
#burger{
display: none;
padding: 23px 15px 10px;
}
#media all and (max-width: 580px){
#burger-container{
float: right;
}
#burger{
cursor: pointer;
display: block;
}
}
This way you are only displaying the burger menu when the screen-width is 580px or less and the padding gives you a larger click area.
See this codepen for example.
This is a better practice in my opinion because you don't have to mess with setting a specific width and height, just play around with the padding.