Code:
.input-wide {
width: 100%;
padding: 10px;
margin: 15px;
box-sizing: border-box;
}
.container-wide {
min-height: 80px;
margin: 20px;
background-color: #fff;
border: 1px solid #666;
}
.container-wide>.content {
padding: 5px;
color: #444;
min-height: 40px;
}<div class="container-wide">
<div class="content2">
<form action="http://localhost/projekt2/new-post" class="new-post" method="post" accept-charset="utf-8">
<input type="text" name="tytul" value="" placeholder="Wpisz tutaj tytuł...." class="input-wide">
<input type="text" name="opis" value="" placeholder="Wpisz tutaj opis....">
<input type="date" name="data" value="">
<select name="status">
<option value="0">Niepubliczny</option>
<option value="1" selected="selected">Publiczny</option>
<option value="2">Zaplanowany</option>
</select>
</form>
</div>
</div>SS:https://i.sstatic.net/CgCzO.jpg
I attempted implementing the box-sizing property, as shown in the code snippet above, but unfortunately it did not resolve the issue. I am unsure of how to effectively address this problem.
While one option could be changing the input's width to 90%, that solution is not ideal for my needs. I want the input field to have equal spacing from both the left and right (margin) while fitting perfectly within a centered layout at 100% width.