Input type {out of border}

Question

I've defined my input text field and button to 300px. Need some professional explanation to my newbie question, why the width of input text field gets out of border, since I've defined both to 300px? 
Appreciate any help
'''
body {
    background-color: #e8f3f8;
    font: 1em/1.5 sans-serif;
}
form {
    background: #a0d8f1;
    margin: 50px auto;
    padding: 10px;
    width: 300px;
    border-radius: 5px;
    border-width: thin;
    border-style: outset;
    border-color: #0a7a9b;
    box-shadow: 1px 1px 10px black
}
input {
    padding: 10px;
    border-radius: 5px;
    font-size: inherit;
}
input[type="text"] {
    display: block;
    margin-bottom: 25px;
    width: 300px;
    border: 2px solid steelblue;
}
input[type="radio"] {
    margin: 0 8px 25px 4px;
}
input[type="radio"]:first-child {
    margin-left: 0;
}
input[type="submit"] {
    width: 300px;
    height: 45px;
    border: none;
    background: #4684b5;
    color: white;
    cursor: pointer;
}
/* UI Element States Pseudo-Classes */
input[type="text"]:enabled {
    background: #fcfbcc;
}
:disabled {
    background: #ddd;
}
input[type="radio"]:checked + label {
    font-weight: bold;
    font-size: 22px;
}body {
    background-color: #e8f3f8;
    font: 1em/1.5 sans-serif;
}
form {
    background: #a0d8f1;
    margin: 50px auto;
    padding: 10px;
    width: 300px;
    border-radius: 5px;
    border-width: thin;
    border-style: outset;
    border-color: #0a7a9b;
    box-shadow: 1px 1px 10px black
}
input {
    padding: 10px;
    border-radius: 5px;
    font-size: inherit;
}
input[type="text"] {
    display: block;
    margin-bottom: 25px;
    width: 300px;
    border: 2px solid steelblue;
}
input[type="radio"] {
    margin: 0 8px 25px 4px;
}
input[type="radio"]:first-child {
    margin-left: 0;
}
input[type="submit"] {
    width: 300px;
    height: 45px;
    border: none;
    background: #4684b5;
    color: white;
    cursor: pointer;
}
/* UI Element States Pseudo-Classes */
input[type="text"]:enabled {
    background: #fcfbcc;
}
:disabled {
    background: #ddd;
}
input[type="radio"]:checked + label {
    font-weight: bold;
    font-size: 22px;
}
'''

Nicholas Mejia · Accepted Answer

When it comes to setting the width of your text input, it's usually a better idea to do so from the HTML Markup itself using the size attribute.
For example:
input type="text" size="20"
The value is based on number of characters.
Hope this helps!

Welcome to the Treehouse Community

Looking to learn something new?

Nijat Mcmudow

Nijat Mcmudow

Input type {out of border}

1 Answer

Nicholas Mejia

Nicholas Mejia

Nijat Mcmudow

Nijat Mcmudow