My first 4 input boxes are not lined up together even though the labels are lined up with each other. How do I get the input boxes to line up perfectly?
If you have not solved it yet, provide a link of your project like codepen so we could help you.
Define what you mean by lined up perfectly.
So each input box starts at the same place on the vertical axis. If you were to draw a vertical line across the start of each input box, it would cover each of the starting edges equally. Much like how the the text is doing in this link https://codepen.io/greevesh/pen/ajJeKr
First of all, do not style using
id's, instead use
.classso that you can duplicate it.
Now wrap the
<div class="outer"> <div> LABEL </div> <div> INPUT </div> </div>
Do the above for each
labeland its corresponding
.outera full 100% width and give
Aligning elements w/ flexbox
I tried it --> https://codepen.io/Mike-was-here123/pen/oMqoqO
I used ID’s since they were required by the challenge, and creating classes i wouldn’t use more then once would be a waste.
Yes the challenge requires Id’s but that doesn’t mean classes are waste adding for only one use…Because you may want to develop you site further so you may end up creating similar forms, at that situations all you have to do is just copy the class which you have previously created, it reduces the code and makes content lighter
In your codepen you have to add class or id for the
can you show me what this looks like with the classes and everything?
Are you sure you want a raw solution straight away.? That won’t take into learning… Let’s do this way you try it what you feel and we will correct it if its wrong…
text-align: center; applied to to body solves some problems …