[HTML][CSS] Różne marginesy Opcje

[o2w5n778]

Cześć!
Mam problem z wartościami marginesów, które są nierówne.
Dla prawego i lewego panelu nadałem marginesy górne po 3%. Niestety odstęp w prawym panelu jest o wiele mniejszy niż w lewym. Natomiast jeżeli ustawię marginesy np. 10px to są one takie same.

[HTML] pobierz, plaintext 
.mainContent {
    width: 70%;
    float: left;
}
 
.content {
    background: #fff;
    overflow: hidden;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 3% 3% 0 0;
}
 
.sidebar {
    float: left;
    width: 30%;
}
 
.rightSidebar {
    background: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin: 3% 0 0 0;
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
 
        <div class="mainContent">
            <article class="content">
                <header>
                    <h1>Aktualności</h1>
                </header>
                <content>
                    <p>Lorem ipsum dolor sit amet dolor. Ut sagittis luctus, ante ipsum enim, sagittis vel, ipsum. Vestibulum consectetuer egestas, nunc posuere eget, bibendum a, bibendum ipsum ut leo non arcu. In id odio eget elit. Aenean aliquet. In hendrerit sed, eros. Vivamus elit a diam. Duis quam placerat elementum consequat. Cum sociis natoque penatibus et malesuada quis, accumsan congue, sem ipsum, vel eros porttitor egestas. Praesent feugiat. Cum sociis natoque penatibus et interdum vehicula. Vivamus pede. Nulla aliquet in, ipsum. Praesent feugiat. Proin ultrices urna, id lorem nec augue.</p>
                </content>
            </article>
        </div>
 
        <aside class="sidebar">
            <div class="rightSidebar">
                <h1>Informacje</h1>
                <p>Lorem ipsum dolor sit amet magna. Nulla interdum elementum. Nam ut nulla ut orci consequat eu, vulputate aliquam euismod pede turpis id.</p>
            </div>
 
            <div class="rightSidebar">
                <h1>Informacje</h1>
                <p>Lorem ipsum dolor sit amet magna. Nulla interdum elementum. Nam ut nulla ut orci consequat eu, vulputate aliquam euismod pede turpis id.</p>
            </div>
        </aside>
 
[HTML] pobierz, plaintext 

Zależy mi na nadaniu marginesów procentowych i aby były one takie same w obu panelach. W czym tkwi problem?

[trueblue]

margin/padding-top/bottom jest liczony na podstawie szerokości elementu. Ustaw po 50% szerokości to zobaczysz efekt.