title: Moving my elements to the right?
body: <p>I'm working with HTML and CSS and I want to align the form and the logo more to the right:</p>
  
  <p><img src="https://i.stack.imgur.com/MbD53.png" alt="enter image description here"></p>
  
  <p>The positions I want are more like this if I do a mockup:
  <img src="https://i.stack.imgur.com/vvc4V.png" alt="enter image description here"></p>
  
  <p>My HTML is</p>
  
  <pre><code>      &lt;!DOCTYPE hml&gt;
                          &lt;html&gt;
                                  &lt;head&gt;  &lt;link rel="stylesheet" href="/welcome/static/css/register.css"/&gt;
  
                                  &lt;STYLE TYPE="text/css"&gt;
  
  
  
  &lt;/STYLE&gt; 
  
  
                                          &lt;title&gt;{% trans %}Register new distributor{% endtrans %}&lt;/title&gt;
                                  &lt;/head&gt;
                                  &lt;body&gt;     &lt;div id="content"&gt;
                                  &lt;form action="{{action}}" method="post"&gt;&lt;img src="/welcome/static/images/reg-reg.gif"&gt;
  
                                                 &lt;table&gt;&lt;tr&gt;&lt;td&gt;
  
                                                  &lt;label&gt;Pers. number &lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="soc_sec" placeholder="{% trans %}Your social security number{% endtrans %}" /&gt;({% trans %}YYMMDDXX{% endtrans %})&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
  
   &lt;label for="start"&gt;Sponsor ID&lt;/label&gt;&lt;/td&gt;&lt;td&gt;
                          &lt;input type="text" id="start" name="Log1" size="3" maxlength="3" /&gt;
                          &lt;input type="text" name="Log2" size="3" maxlength="3" /&gt;
                          &lt;input type="text" name="Log3" size="3" maxlength="3" /&gt;
                  &lt;input type="text" name="Log4" size="3" maxlength="3" /&gt;(&lt;a href="/sponsor-id-info.html"&gt;{% trans %}What is a sponsor ID{% endtrans %}?&lt;/a&gt;)&lt;/td&gt;&lt;td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
                                                  &lt;label&gt;Email&lt;/label&gt;&lt;/td&gt;&lt;td&gt; &lt;input type="text" name="email" placeholder="{% trans %}Your email{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
   &lt;label&gt;{% trans %}First name{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="firstname" placeholder="{% trans %}Your first name{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
   &lt;label&gt;{% trans %}Last name{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="lastname" placeholder="{% trans %}Your last name{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;
   &lt;td&gt;
   &lt;label&gt;{% trans %}Address{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="address" placeholder="{% trans %}Your address{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
  &lt;label&gt;{% trans %}Zip code{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="zipcode" placeholder="{% trans %}Your zip code{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
  &lt;label&gt;{% trans %}City{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="city" placeholder="{% trans %}City{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;
  &lt;label&gt;{% trans %}Phone{% endtrans %}&lt;/label&gt;&lt;/td&gt;&lt;td&gt;&lt;input type="text" name="phone" placeholder="{% trans %}Your phone number{% endtrans %}" /&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  
  
                                          &lt;button&gt;{% trans %}Next{% endtrans %}&lt;/button&gt;
                                  &lt;/form&gt;&lt;img src="/welcome/static/images/snabbreg002.jpg"&gt;&lt;/div&gt;
                          &lt;/html&gt;
  </code></pre>
  
  <p>And my CSS is</p>
  
  <pre><code>BODY {background-image: url(/welcome/static/images/reg-bg.png); background-repeat: repeat-x; }
  
  #content {
    width: 700px ;
    margin-left: auto ;
    margin-right: auto ;
  }
  </code></pre>
  
  <p>Could you advice how to align my components more to the right like in the lower picture?</p>
  
  <p>Thank you</p>
  
  <h2>Update</h2>
  
  <p>Now I could align the logo to the right, all that is left to be done is moving the form to the right. How do I do it?</p>
  
  <p><img src="https://i.stack.imgur.com/EJ4Jy.png" alt="enter image description here"></p>