title: CSS Change Spacing Between Inputs
body: <p>I am using some code from <a href="http://purecss.io/forms/" rel="nofollow noreferrer">purecss.io</a> to create some elegant looking forms. I am also using <a href="http://experiments.wemakesites.net/css3-rating-stars-with-selection.html" rel="nofollow noreferrer">this code</a> to have a simple rating system for my form.</p>
  
  <p>However, when I combine the two together, the spacing on the rating looks very spaced out because of the CSS from purecss.io</p>
  
  <p>How can I fix the spacing?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"&gt;
  &lt;form action="" method="post" class="pure-form pure-form-aligned"&gt;
      &lt;fieldset&gt;
          &lt;div class="pure-control-group"&gt;
              &lt;label for="foo"&gt;Supercalifragilistic Label&lt;/label&gt;
              &lt;input id="foo" type="text" placeholder="Enter something here..."&gt;
          &lt;/div&gt;
  
          &lt;div class="pure-control-group"&gt;
              &lt;label for="foo"&gt;Rating&lt;/label&gt;
              &lt;div class="acidjs-rating-stars"&gt;
                  &lt;input type="radio" name="group-1" id="group-1-0" value="5" /&gt;&lt;label for="group-1-0"&gt;&lt;/label&gt;&lt;!--
                  --&gt;&lt;input type="radio" name="group-1" id="group-1-1" value="4" /&gt;&lt;label for="group-1-1"&gt;&lt;/label&gt;&lt;!--
                  --&gt;&lt;input type="radio" name="group-1" id="group-1-2" value="3" /&gt;&lt;label for="group-1-2"&gt;&lt;/label&gt;&lt;!--
                  --&gt;&lt;input type="radio" name="group-1" id="group-1-3" value="2" /&gt;&lt;label for="group-1-3"&gt;&lt;/label&gt;&lt;!--
                  --&gt;&lt;input type="radio" name="group-1" id="group-1-4"  value="1" /&gt;&lt;label for="group-1-4"&gt;&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="pure-controls"&gt;
              &lt;label for="cb" class="pure-checkbox"&gt;
                  &lt;input id="cb" type="checkbox"&gt; I've read the terms and conditions
              &lt;/label&gt;
          &lt;input name="SubmitButton" type="submit" class="pure-button pure-button-primary"&gt;Submit&lt;/button&gt;
  
          &lt;/div&gt;
      &lt;/fieldset&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is what the page looks like for me:</p>
  
  <p><a href="https://i.stack.imgur.com/EZLxE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EZLxE.png" alt="enter image description here"></a></p>