How to align input box with div

I am trying to align some stuff in a login page. I want the pictures to appear left to the input boxes and the buttons on the down part of the div to be left and right. Something like this:

But this is what is happening (on Safari. Chrome works kinda OK as you can see on top image)

The problem is that although it partially works on Chrome, the input boxes are too small and I can't increase their size.

This is the code I am trying to use:

// Outer white DIV for the forms and buttons:

.login-form {
  width: 360px;
  height: 300px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 19px 29px 29px 19px;
  color: #444444;
  background: rgba(253, 253, 253, 1.000);

  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border: solid 1px rgba(144, 144, 144, 0.075);
}

// Login field for e-mail:

.login-field-up {
  margin-bottom: 5px;
  margin-top: 10px;
  margin-right: 100px;
  float: left;
  display: inline-block;
}

/ Login field for password:

.login-field-down {
  margin-top: 10px;
  margin-bottom: 15px;
  float: left;
}

// DIV for Icons of user credential and golden key:

.login-icon {
  margin-top: 15px;
  margin-right: 15px;
  float: left;
  display: inline-block;
}

// Right checbox:

.right-col {
  float: right;
  text-align: center;
  margin-top: 10px;
}

Left blue login button: 

.left-col {
  float: left;
  margin-left: 10px;

}

If there is any other easy way to do it, I am up to it. Since I have always worked with backend, I suck with CSS.

<section id="banner">
    <h2>Title</h2>
    <section>
        <div id="skel-layers-wrapper" class="login-form">
            <form method="post" action="{% url 'principal' %}">
                <div class="login-icon">
                    <img src="{% static "icons/identity.png" %}" class="icons">
                </div>
                <div class="login-field-up">
                        <input type="text" name="username" id="username" placeholder="E-mail" />
                </div>
                <div class="login-icon">
                    <img src="{% static "icons/key_user.png" %}" class="icons">
                </div>
                <div class="login-field-down">
                        <input type="password" name="password" id="username" placeholder="Password" />
                </div>
                <div class="left-col">
                        <input type="submit" value="Login!" class="button" />
                </div>
                <div class="right-col">
                    <input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
                    <label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
                </div>
            </form>
        </div>
    </section>
</section>

Solution

You can increase the size of your input boxes by setting the "font-size" attribute in your style sheet, for example,

input { font-size:2em; }

And you can align images with input boxes by using <label></label>, for example,

<label for="email"><img src="image.png" /></label> <input type="email" placeholder="E-mail" name="email" />

Or, you can also place the images in a separate div and the inputs in another div and then adjust the width, margin or padding to align them the way you want.

But as Billy said, if you post your html code, it will be easier to provide a solution.

EDIT: Thanks for your code. I think you wanted to achieve something like this. I added some borders to help you understand the positioning of the divs. Remove them and change the urls for the images once you are done debugging.

<!DOCTYPE html>

<html>

<head>

	<style>
	
		.login-form {
		width: 360px;
		height: 300px;
		margin-left: auto;
		margin-right: auto;
		padding: 19px 29px 29px 19px;
		color: #444444;
		background: rgba(253, 253, 253, 1.000);
		
		border-radius: 7px;
		-webkit-border-radius: 7px;
		-moz-border-radius: 7px;
		border: solid 1px rgba(144, 144, 144, 0.075);
		
		border:1px solid black;
		}
		
        #title-header {
            text-align:center;
        }

		#username, #password {
			margin-left:20px;
		}
		
		input {
			font-size:1em;
		}
		
		img {
			width:16px;
			height:16px;
		}
		
		.login-field-up {
		margin-left:50px;
		width:250px;
		border:1px solid black;
		}
		
		.login-field-down {
		margin-left:50px;
		width:250px;		
		border:1px solid black;
		margin-top:20px;
		margin-bottom:20px;
		}

		.login-icon {
		border:1px solid black;
		}

		.right-col {
		float:left;
		width:160px;
		margin-left:30px;
		border:1px solid black;
		}

		.left-col {
		margin-left:50px;
		float:left;
		width:60px;
		border:1px solid red;
		}
		
		.inner-wrapper {
			margin-top:50px;
			width:350px;
			height:150px;
			border:1px solid red;
		}
		
	</style>


<section id="banner">
    <h2 id="title-header">Title</h2>
    <section>
        <div id="skel-layers-wrapper" class="login-form">
            <form method="post" action="{% url 'principal' %}">
				<div class="inner-wrapper">
					<div class="login-field-up">
						<img src="image.png">
						<input type="text" name="username" id="username" placeholder="E-mail" />
					</div>
					<div class="login-field-down">
							<img src="image.png">
							<input type="password" name="password" id="password" placeholder="Password" />
					</div>
					<div class="left-col">
							<input type="submit" value="Login!" class="button" />
					</div>
					<div class="right-col">
						<input type="checkbox" id="remember_login" checked="" name="remember_login" class="6u$ 12u$(3)">
						<label for="remember_login" style="color:#5C5C5C">Remember me <img src="{% static "icons/lock_gold_16.png" %}" class="icons"></label>
					</div>
				</div>
			</form>
        </div>
    </section>
</section>