CSS Change Spacing Between Inputs - html

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;
}

Answer 3

The base css is overwriting yours as you have suspected. You need to either define your padding/margin on your label elements using !important to make sure the css rules you define take precedence.
For instance if the margin for label elements is 0.5em top/bottom 0.2em on the left/right and you only want it say 0.1em on the left/right you would have to define in your css file like this
margin: {
0.5em 0.1em !important;
}