How to Arrange HTML Label and Input Side by Side

#form {    background-color: #FFF;    height: 600px;    width: 600px;    margin-right: auto;    margin-left: auto;    margin-top: 0px;    border-top-left-radius: 10px;    border-top-right-radius: 10px;    padding: 0px;    text-align:center;}label {    font-family: Georgia, "Times New Roman", Times, serif;    font-size: 18px;    color: #333;    height: 20px;    width: 200px;    margin-top: 10px;    margin-left: 10px;    text-align: right;    clear: both;    float:left;    margin-right:15px;}input {    height: 20px;    width: 300px;    border: 1px solid #000;    margin-top: 10px;    float: left;}input[type=button] {    float:none;}

<div id="form">    <form action="" method="post" name="registration" class="register">        <fieldset>            <label for="Student">Name:</label>            <input name="Student" id="Student" />            <label for="Matric_no">Matric number:</label>            <input name="Matric_no" id="Matric_no" />            <label for="Email">Email:</label>            <input name="Email" id="Email" />            <label for="Username">Username:</label>            <input name="Username" id="Username" />            <label for="Password">Password:</label>            <input name="Password" id="Password" type="password" />            <input name="regbutton" type="button" class="button" value="Register" />        </fieldset>    </form></div>

Labels not aligned on top left side above text inputs

Make Parent div width to same as your <input> width so that you can use margin:auto to center a div. Finally you can use text-align: left as shown here

.account-form{
  text-align: left; 
  margin: auto; 
  width: 550px;
}

Note: By default it takes text-align: left. I just mentioned because you used text-align: center

How can I get two form fields side-by-side, with each field’s label above the field, in CSS?

<form>
  <label for="company">
    <span>Company Name</span>
    <input type="text" id="company" />
  </label>
  <label for="contact">
    <span>Contact Name</span>
    <input type="text" id="contact" />
  </label>
</form>

label { width: 200px; float: left; margin: 0 20px 0 0; }
span { display: block; margin: 0 0 3px; font-size: 1.2em; font-weight: bold; }
input { width: 200px; border: 1px solid #000; padding: 5px; }

Illustrated at http://jsfiddle.net/H3y8j/

How to align image and form side by side and it should also be perfectly aligned even in different views like mobile view and desktop

You have your primary box container set to position: absolute and several positioning attributes that are not present on the image which is probably why everything is shifting. I don't know what else this form and image are going to be put into but they don't seem necessary in your example so I've removed them and added a flexbox .flexContainer to wrap your content in and that helps keep your content aligned in a single row. You could take it a step further and add a @media query (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) to control how the image reacts on mobile (for example, change the flex-direction to column so the image appears below the contact box instead of stretching inward on smaller screens.
`

.flexContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

img {
  width: 100%;
  height: auto;
  height: 475px;
  cursor: pointer;
}

span {
  content: "\27F6";
}

label {
  padding-left: 10px;
  font-size: 16px;
  padding-top: 10px;
}

.box {
  height: 475px;
  background: green;
  padding: 40px;
  box-sizing: border-box;
  margin-left: 1%;
  cursor: pointer;
}

.box p {
  font-family: 'jmsans', sans-serif;
  padding: 0;
  margin: 0 0 40px;
  color: white;
  font-size: 40px;
  width: 467px;
}

.box input {
  margin-bottom: 30px;
  width: 466px;
  box-sizing: border-box;
  box-shadow: none;
  border: none;
  border-bottom: 2px solid #999;
  outline: none;
  padding-left: 10px;
  font-weight: bold;
  height: 56px;
}

.box input[type="submit"] {
  border-bottom: none;
  cursor: pointer;
  color: #fff;
  margin-bottom: 0;
}

.box form div {
  position: relative;
}

.box form div label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  transition: 0.5s;
  pointer-events: none;
}

<div class="flexContainer">
  <div class="box">
    <p>contact us</p>
    <form>
      <div>
        <input type="text" name="" required="">
        <label>firstname</label>
      </div>
      <div>
        <input type="text" name="" required="">
        <label>last name</label>
      </div>
      <div>
        <input type="text" name="" required="">
        <label>mail</label>
      </div>
      <div class="button">
        <button type="button">submit <span>⟶</span></button>
      </div>

    </form>
  </div>

  <div>
    <img src="https://www.fnordware.com/superpng/pnggrad8rgb.png">
  </div>
</div>