Width: equal percentage values, different sizes


Hey everyone,
I'm trying to make the footer and the header the same size, so that they're aligned. As you can see on the CSS I've assigned a width value of 97.5% on both, but the footer is slightly smaller on the right side. I thought it had something to do with the margin given to the right div, that would give the footer an automatic margin to the right thanks to the "clear:both" yet even if i delete the margin on the right div the size is still not equal. :confused:

Can someone shine some light on this?
(i'm not really looking for a work around, I would really like to understand what's causing it.)

<!DOCTYPE html>
        <link type="text/css" rel="stylesheet" href="stylesheet.css";></link>
        <div class="header">a</div>
        <div class="left">a</div>
        <div class="right">a</div>
        <div class="footer">a</div>

    border: 2px solid black;

.header {
    background-color: green;
    height: 50px;
    width: 97.5%;
    position: fixed;
    z-index: 1;
.left {
    background-color: blue;
    height: 75%;
    width: 25%;
    position: relative;
    margin-top: 60px;
.right {
    background-color: yellow;
    height: 75%;
    width: 50%;
    float: right;
    position: relative;
    margin-right: 10px; 
    margin-top: 60px;
    margin-bottom: 10px;
.footer {
    background-color: red;
    height: 50px;
    width: 97.5%;
    clear: both;    



You can simple removes body margin, like i did here by adding body { margin: 0 auto; } to remove bodys default margin.