fix position in a div css

I'm a new to css and i really can't fix all as i want... How can i align vertical the h1 to the start of user form? but most important problem for me is that i can't center good the check and the link, i want it one below the other and centered in the div. I'm not sure if i have positioned good the div but i want it centred but not too low on the page. thanks to everyone!

body {
    text-align: left;
    background-image: url("img/lemon.jpg");
    color: #1b1b1b;
}

input[type=text],
input[type=password]{
    width: 65%;
    display: table;
    margin: 0 auto;
    padding: 12px 20px;
    border: none;
    border-bottom: 1px solid darkgray;
    background-color: #e9e9e9;
    box-sizing: border-box;
    margin-bottom: 7px;
    resize: vertical;
}

h1 {
    font-size: x-large;
}
h2 {
    font-size: x-large;
}

button {
    background-color: #4CAF50;
    color: white;
    padding: 7px 20px;
    width: 65%;
    height: 20%;
    display: table;
    margin: 0 auto;
    border: none;
    cursor: pointer;
    background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%);
    background-color: #3d94f6;
    border: 1px solid #337fed;
    cursor: pointer;
    color: #ffffff;
    font-size: 17px;

    text-decoration: none;
    text-shadow: -1px 1px 1px #1570cd;
}

button:hover {
    background: linear-gradient(to bottom, #1e62d0 5%, #3d94f6 100%);
    background-color: #1e62d0;
}

button:active {
    position: relative;
    top: 1px;
}

.container {
    width: 35%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    margin-top: 7%;
    background-color: white;
    box-shadow: 2px 2px 11px rgb(11, 11, 11);
    -webkit-box-shadow: 2px 2px 11px rgb(11, 11, 11);
    -moz-box-shadow: 2px 2px 11px rgb(11, 11, 11);
    overflow: hidden;
}

#check {
    display:block;
    margin-top: 7px;
}

span.frgt {
    margin-top: 7px;
    display: block;  
}
a {
    text-decoration: none;
    color: #1e62d0;
}
img {
    width: 100%;
    height: auto;
    opacity: 0.4;
}

<!DOCTYPE html>
<head>
</head>
<body>
    <div class="container">
        <h1>Login</h1>
        <input type="text" placeholder="Username" name="uname" required>
        <input type="password" placeholder="password" name="psw" required>
        <button type="submit">Login</button>
        <hr>
        <label id="check">
            <input type="checkbox" checked="checked" name="remember"> Remember me
        </label>
        <span class="frgt">forgot <a href="#">password?</a></span>
    </div>
</body>
</html>

Solution

If you set the h1 to the same width of the button and use "margin: 0 auto" to center it, this will make the h1 span the width of the button, and by default the text will be left aligned to the start of the button.

h1 {
  font-size: x-large;
  width: 65%;
  margin: 0 auto;
}

I'm not too sure exactly what you want to do with the check section. If you use "text-align: center", this will center it, or use the same code as above to align it with the buttons.