How can I align the input bars right on top of each other? The way I have them currently set up is that the label
text is taking up space from the left of each input bar so that the input bars are not perfectly aligned on top of each other.
Here’s my HTML and CSS:
<body>
<div class="container">
<h2>Expense Tracker</h2>
<h3>Add New Item</h3>
<div>
<label>Name</label>
<input type="text" id="name">
</div>
<div>
<label>Date</label>
<input type="number" id="date">
</div>
<div>
<label>Amount</label>
<input type="number" name="amount">
</div>
<div class="button">
<button type="button">Add Expense</button>
</div>
<table class="table">
<tr>
<th>Name</th>
<th>Date</th>
<th>Amount</th>
<tr/>
<tr>
<th>value 1</th>
<th>value 2</th>
<th>value 3</th>
</tr>
</table>
</div>
</body>
h2, h3 {
text-align: center;
}
table, th, tr {
border: 1px solid black;
border-collapse: collapse;
}
.container {
display: flex;
flex-direction: column;
margin: 0 auto;
max-width: 300px;
align-content: center;
padding: 0px;
}
label {
display: inline-block;
margin: 10px;
text-align: right;
}
.button {
margin: 20px auto;
text-align: center;
}
.table {
margin: 0 auto;
align-content: center;
}