How do I get rid of the big margin between my labels and the input fields?

Question

Below is my code, first of all:

• How do I get rid of the big margin to the right that occurs between the labels and the input fields? I tried setting the margin-right to -150px which made it smaller but that just seems like an idiotic solution..
• How can I remove the need to write <br /> to make them hop down a line automatically? I was told never to use <br />, it also seems messy.

HTML:

<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
            <form action="" method="POST">
                <label>In-game username:</label>
                    <input name="username" type="text"></input><br />
                <label>Email:</label>
                    <input name="email" type="text"></input><br />
                <label>Game:</label>
                    <input name="game" type="text"></input><br />

            <input name="mySubmit" type="submit" value="Submit"></input>
            </form>
</div>

CSS:

label {
    display: block;
    float: left;
    width: 120px;
    margin-right: 5px;
    text-align: right;
}

Answer 1

You can try something like this

<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
  <form action="" method="POST">
    <p>
      <label>In-game username:</label>
      <input name="username" type="text"></input>
    </p>
    <p>
      <label>Email:</label>
      <input name="email" type="text"></input>
    </p>
    <p>
     <label>Game:</label>
     <input name="game" type="text"></input>
    </p>
    <p></p>
    <input name="mySubmit" type="submit" value="Submit"></input>
 </form>
</div>

and then the css

p label {
    display: block;
    float: left;
    width: 120px;
    margin-right: 5px;
}

p input{
    float:right;

}

p{
clear:both;
}

form{
    width:20em;
}

http://jsfiddle.net/V92PT/1/

Answer 2

But the fields part on table like this

<div id="groupmepopup" class="popup">
<h4>Fill in your information so that you can be added.</h4>
            <form action="" method="POST">
                <table><tr><td><label>In-game username:</label></td>
                   <td> <input name="username" type="text"></input></td ></tr>
                    <tr><td>   <label>Email:</label></td>
                        <td>  <input name="email" type="text"></input></td></tr>
               <tr><td>  <label>Game:</label></td>
                        <td> 
                    <input name="game" type="text"></input>
</td></tr>
                </table>
            <input name="mySubmit" type="submit" value="Submit"></input>
            </form>
</div>

or add another <br/> after <label>In-game username:</label>

or use <p></P> for each row