Textarea expands past the padding and isn't flush - css

Question

I have everything in my comment box set with a width of 100%. The div has a padding of 10px. However, the textarea somehow goes into that padding, but only on the right side. A bit hard to explain but here is a photo: https://i.imgur.com/aWQVeto.png
You can see on the right that the textarea exceeds the rest.
I have tried googling this problem but I can't seem to find anybody else that has experienced this. It shows in every browser, which I thought at first it was a browser issue.
Here is the modal itself code:
#pictureModal {
width: 31%;
height: auto;
text-align: left;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
left: calc(50vw - (/* width */140px / 2));
padding: 20px;
background-color: black;
color: white;
text-align: center;
}
And here is the input code:
#pictureModalInput{
width: 100%;
height: 30px;
outline: none;
}
I want the right of the textarea to be flush with the X box and the Submit button.

Answer 1

Try this one also I think its useful for you. You have to use box-sizing: border-box; in this #pictureModalInput id.
#pictureModal {
width: 31%;
height: auto;
text-align: left;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
left: calc(50vw - (/* width */140px / 2));
padding: 20px;
background-color: black;
color: white;
text-align: center;
}
#pictureModalInput{
border: none;
height: 30px;
outline: none;
box-sizing: border-box;
width: 100%;
}
button {
background: black;
border: 2px solid #FFF;
border-radius: 0;
color: #FFF;
margin-top: 6px;
text-align: center;
width: 100%;
}
<div id="pictureModal">
<textarea id="pictureModalInput"></textarea>
<button>Submit</button>
</div>

Answer 2

Remove the padding on the textbox. I included an example below with just a couple deviations from your code.
Textbox padding is a user-agent style, meaning that it comes shipped with the element itself. You can override these user-agent styles in your stylesheet. It's good to be aware of these styles by reading up online and then exploring any layout issues you're having with devTools to see whether any user-agent styles might be causing your bug.
#pictureModal {
background-color: black;
color: white;
display: flex;
flex-direction: column;
height: auto;
left: calc(50vw - (/* width */140px / 2));
padding: 20px;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
width: 31%;
}
#pictureModalInput{
border: none;
height: 30px;
outline: none;
padding: 0;
width: 100%;
}
button {
background: black;
border: 2px solid #FFF;
border-radius: 0;
color: #FFF;
margin-top: 6px;
text-align: center;
width: 100%;
}
<div id="pictureModal">
<textarea id="pictureModalInput"></textarea>
<button>Submit</button>
</div>