Input field wide not working properly - html

Question

My target output want same as like blow image.
My CSS and HTML:
header {
height: 40px;
width: 100%;
position: fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
After write my code input left side showing properly but the right side not showing properly. From my knowledge right side need show 15px padding. But I can't understand what wrong with my code.

Answer 1

Two possible solutions:
First, you could add box-sizing: border-box to your styles. As it is, your header is set to match the entire width of its container, and then the padding is applied outside that, which is the default behaviour for box-sizing, and which makes the padding extend outside the limits of the container.
Some more reading on css-tricks.com.
You also need to adjust the height to allow for the new box model (total height now includes the height of the padding) - here's your updated code:
header {
box-sizing: border-box;
height: 70px;
width: 100%;
position: fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
Option 2: if you prefer to keep the default box model, you can use a calculated width to compensate for the padding: set the width of header to calc(100% - 30px) (be careful to keep the spaces around the - if you choose this option).

Answer 2

This solution is for you.
body{
margin:0;
padding:0;
}
header{
height: 40px;
display:block;
background: #00A6E3;
border-radius: 0 0 10px 10px;
padding:15px 15px 15px 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
z-index: 5;
}
header .todoitem{
height: 100%;
width:100%;
display:block;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder{
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>

Answer 3

You can do something like this, too.
header {
height: 70px;
width: 100%;
position:fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-sizing:border-box;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
I have used box-sizing:border-box so padding is included in total width, and increased height of header, accordingly... Main problem was that your padding actually increased width of header - so header width was over 100% (100% + padding).
More about box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Answer 4

header {
height: 40px;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>
header {
height: 40px;
width: 100%;
position: fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}
header .todoitem {
width: 100%;
height: 100%;
float: left;
border: none;
border-radius: 5px;
background: rgba(255, 255, 255, 0.2);
text-indent: 20px;
}
header input::-webkit-input-placeholder {
color: #fff;
}
<header>
<input type="text" name="todoitem" class="todoitem" placeholder="Enter your activity...">
</header>

Answer 5

Try removing float:left, and add text-align:center to header, and text-align:left to .todoitem, then add margin values to .todoitem to position it where you want.

Answer 6

Width:100% and padding:2px;
doesn't goes well, It never does. Either reduce width to 98% or add padding as padding :15px 0;
header {
height: 40px;
width: 100%;
position: fixed;
background: #00A6E3;
top: 0;
left: 0;
border-radius: 0 0 10px 10px;
padding: 15px 0;
box-shadow: 0 2px 5px rgba(44, 62, 88, 0.15);
display: block;
z-index: 5;
}