CSS Change Spacing Between Inputs

Question

I am using some code from purecss.io to create some elegant looking forms. I am also using this code to have a simple rating system for my form.

However, when I combine the two together, the spacing on the rating looks very spaced out because of the CSS from purecss.io

How can I fix the spacing?

Here is the code:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<form action="" method="post" class="pure-form pure-form-aligned">
    <fieldset>
        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>

        <div class="pure-control-group">
            <label for="foo">Rating</label>
            <div class="acidjs-rating-stars">
                <input type="radio" name="group-1" id="group-1-0" value="5" /><label for="group-1-0"></label><!--
                --><input type="radio" name="group-1" id="group-1-1" value="4" /><label for="group-1-1"></label><!--
                --><input type="radio" name="group-1" id="group-1-2" value="3" /><label for="group-1-2"></label><!--
                --><input type="radio" name="group-1" id="group-1-3" value="2" /><label for="group-1-3"></label><!--
                --><input type="radio" name="group-1" id="group-1-4"  value="1" /><label for="group-1-4"></label>
            </div>
        </div>

        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>
        <input name="SubmitButton" type="submit" class="pure-button pure-button-primary">Submit</button>

        </div>
    </fieldset>

</form>

Here is what the page looks like for me:

Answer 1

I saw the other answers included suggestions for !important statements, so I decided to post mine. I threw the code you provided into a codepen.io and made a few quick changes to see if this is what you were looking for.

I added the class "raters" to your markup and styled it with that.

<div class="pure-control-group raters">
  <label for="foo">Rating</label>
  <div class="acidjs-rating-stars">

You can see why I've added these style rules in the comments supplied with them:

.raters label{
  float:left;       /* Corrective float for your modified code              */
}
.raters input{
  margin:0 0.25em; /* Spaces out the 'floated' radio inputs for presentation*/
}
.raters .acidjs-rating-stars label{ width:auto; } /* Actual Width Correction */

You can see it working live here: http://codepen.io/anon/pen/vKNGpv

(Note: I added the yahoo's external stylesheet to the CSS panel settings. You can access them with the gear in the top right-hand corner.)*

Answer 2

You can override margin for the inputs (which are you rating stars) of the purecss css in another css file with this very specific selector:

.pure-form.pure-form-aligned .acidjs-rating-stars input[name="group-1"] {
    background: blue;
    margin-right: -160px;
}