So the biggest advice I can start with is format your code!!
If you want others to help,. you have to follow some sort of coding format. All of your indention is spaghetti.
You can’t go wrong following these: https://google.github.io/styleguide/htmlcssguide.html
So first thing I did was beautified your code.
And guess what I noticed right away? Almost all your html isn’t even within your body tags…
Like line 13 you </body>
Which means lines 14 - 50 are all invalid html.
Never use <br>
in your webpage. Just don’t use it. It’s valid html, sure, but use CSS to style.
The reasoning for your labels/inputs not lining up is because you don’t have them in the same containers. You have your label in one box and your inputs in another… place them both in same box (div) (label).
So the structure should be like this:
<div class="container">
<label>
<span>Blah</span>
<input type="text">
</label>
<label>
<span>Blah</span>
<input type="text">
</label>
<label>
<span>Blah</span>
<input type="text">
</label>
</div>
That may look someone confusing., but if you just look at one of them.
<label>
<span>Blah</span>
<input type="text">
</label>
It makes total sense. Your span holds your text, the input is where you type. The label holds them both.
And since you have multiple:
<label><span>Blah</span><input type="text"></label>
You place those inside a box (div) too.
I would also stay away from <strong>
,. there’s just no reason to use it when you have CSS.