Right alignment in Form elements wrong - html

Question

I have a problem that I believe might be pretty stupid, but I can't figure out.
I have a form, where I want to align the elements in both sides, problem is I can't align it to the right (where the red line is), here is a picture to show it:
and here is my SASS (sorry if is not very tidy I been working for a while in it and might be messy):
.contact {
margin: 100px auto 0;
max-width: $half-width;
form {
letter-spacing: 2px;
color: $color4;
input, textarea {
border: 3px solid $color5;
padding: 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 16px;
background: $color6;
&:focus {
outline: none !important;
border-color: $color3 !important;
}
textarea {
height: 10em;
width: 100%;
overflow: inherit;
}
}
.info-group {
margin-top: 10px;
label {
display: inline-block;
width: 45%;
float: left;
&:nth-child(2) {
float: right !important;
margin: 0 auto;
}
}
}
.tell-group {
width: 100%;
label {
display: inline-block;
margin-top: 10px;
}
textarea {
height: 10em;
width: 100%;
float: left;
}
}
.submit-wrap {
margin-top: 10px;
float: right;
input {
width: 100px;
font-size: 18px;
text-transform: uppercase;
color: $color6;
background-color: $color5;
border: none;
&:hover {
color: $color1;
}
}
}
}
}
Thanks!

Answer 1

padding: 10px; is going to add 20px to the width, this extra width is likely what is causing the problem. You can change the width attribute to width: calc(100% - 20px); to account for the 10px padding on each side of the element.
Here is a list of where calc is supported: http://caniuse.com/#feat=calc
You can also try adding these css rules to the problem elements to move them over:
position: relative;
left: -20px;
You might also have to add position: relative; to the parent element
Here is a fiddle showing the left -20px method: http://jsfiddle.net/0f153w8e/
Side note: you might have to adjust the left amount a little bit to make it exact if your text areas have borders (which they probably do)