How would I make all these sections aligned perfectly? Small gaps

Question

Below is the image - Laugh as much as you want, it's part of my specifications.

#content2 {
    float:left;
    margin: 1% 2% 1% 1%;
    border-color: #000000;
    border: 2px solid;
    background-color: #Cc3399;
    width: 40%;
    margin-right: auto;
    display: block;
}
#middle {
    float: left;
    margin: 1% 1%;
    margin-right: auto;
    padding: 1%;
    background-color: #fff;
    width: 300px;
    height: 500px; 
    border-color: #000000;
    border: 2px solid;
    background-color: #Cc3399;
}

aside {
    float: right;
    width: 29%;
    margin: 1% 1%;
    margin-right: auto;
    padding: 2% 0;
    border-color: #000000;
    border: 2px solid;
    background-color: #Cc3399;
}

I just want it to look better in general. Any tips on what I can do?

Answer 1

Add some padding to the form elements. Add placeholders rather than text fields and maybe align everything up so it looks a little more professional.

But hey, if you've met your specification then that's all you can do, welcome to dealing with clients :)

EDIT: If you want everything aligned better. Don't use percentages for your margins, use fixed width where possible. Wrap the text labels in a div and the input fields in another div to make them all align better. Better yet just put placeholders in the input fields like I mentioned and then wrap that in a single div if necessary to align better. Check your padding/margins always and use F12 on the page to play around with.