Textbox doesn't fit into division - css

Question

Recently I try to fit textbox for publishing post. Main problem - textbox doesn't want to fit properly, even if it obviously should. Here is the image:
and here is the JSFiddle file I prepared for this question:
https://jsfiddle.net/Ch3shireDev/u0j5rgud/4/
It looks like a textbox is naturally expanded to the right.
body {
margin: 0;
height: 100%;
width: 100%;
}
.post {
display: flex;
background-color: lightgrey;
border-radius: 10px;
/* width: auto; */
height: 300px;
padding: 5px 5% 5px 5%;
margin: 20px;
box-shadow: #888888 1px 1px 1px 1px;
}
.background {
margin: 5px;
border: 1px solid;
padding: 0;
}
textarea {
resize: none;
width: 80%;
margin: 10px;
}
.titlebox {
height: 20px;
}
.message {
height: 100px;
}
.background {
width: 100%;
padding: 10px;
}
textarea {
margin: 0;
height: auto;
width: 100%;
}
.input {
background-color: red;
padding: 5px;
}
.buttons {
float: right;
padding-top: 5px;
padding-left: 5px;
margin-bottom: 0;
margin-right: 0;
padding-right: 0;
}
<div class=post>
<div class=background>
<div class=title>
<h3>
Publish post
</h3>
</div>
<div class=input>
<form>
<textarea class=message cols=50></textarea>
</form>
</div>
<div class=buttons>
<input type="submit" value="Preview" />
<input type="submit" value="Send" />
</div>
</div>
</div>
What should I do to get textbox fitting right?

Answer 1

For your textarea, just add box-sizing: border-box;.
textarea{
resize:none;
width:80%;
margin: 10px;
box-sizing: border-box;
}
https://jsfiddle.net/u0j5rgud/6/
border-box: The width and height properties (and min/max properties) includes content, padding and border

Answer 2

You have 2 textarea rules in your css, try deleting the one with the wodth set to 100%

Answer 3

Remove the padding from your textarea
textarea {
padding: 0;
}