Css ignoring class rules

Question

Very basic question but it seems my CSS is ignoring my class rules and still applying padding to the left and to the right:

http://jsfiddle.net/VabWL/11/

This makes it drop off the end. Can anyone see what I am doing wrong here please?

#num {float: left; background: pink; width: 16.8%; text-align: center; margin: 2%;}
.first {margin-left: 0px; background: blue; height: 50px;}
.last {margin-right: 0px;}

<div id="num" class="first">0</div>
<div id="num">1</div>
<div id="num">4</div>
<div id="num">6</div>
<div id="num" class="last">9</div>

Answer 1

An id selector is more specific than a class selector so will be applied last in the cascade.

ids have to be unique, so your HTML is invalid anyway. Use classes throughout instead.

<div class="num first">0</div>
<div class="num">1</div>
<div class="num">4</div>
<div class="num">6</div>
<div class="num last">9</div>

Answer 2

Doesn't this work?

JSfiddle Demo

CSS

* { 
    padding: 0px; 
    margin: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden;
}

div {
    float: left;
    background: pink; 
    width: calc(92%/5);
    text-align: center;
    margin-right: 2%;
}

.last {
    margin-right: 0;
}

Answer 3

The id styling takes priority over the class.

Try adding !important to the end of each CSS property of the classes to prioritise it.

.first {margin-left: 0px !important; background: blue !important; height: 50px !important;}
.last {margin-right: 0px !important;}