How can I make a TextArea 100% width without overflowing when padding is present in CSS?

Question

I have the following CSS and HTML snippet being rendered.

<

Answer 1

* {
    box-sizing: border-box;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

input[type=text], select, textarea{
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

  

    Name
    
  
  

    Country
    
      UK
      USA
      RU
    
  
    
  

    Subject