Niedziałający margines

Witam, proszę was o pomoc z stopką, ponieważ sam sobie nie umiem poradzić.
Chodzi mi mianowicie o to że stopka mi ucieka w prawą strone i margin-right na nią nie działa a co ciekawe margin-left już działa.
PS. wiem że to bardzo słaby kod i strona i pewnie ma masę błędów ale dopiero zaczyna się tym bawić :)
Dzięki z góry za pomoc :)
http://output.jsbin.com/nifexefebi/1/
http://jsbin.com/nifexefebi/1/edit?html,css,output

stopka powinna być umieszczona w kontenerze. I prawdopodobnie masz coś z arytmetyką nie tak.

U mnie jest wszystko dobrze.

Miałem wcześniej stopke w kontenerze ale też nie działało, ale co ma arytmetyka do stopki skoro w stopce daje width:100%; nie rozumiem :P

Miałeś taki kod:

 
</div>
<div id="stopka">
&copy; XXXXXXXXXXXXXXXXXXXXXXXXXXX
</div>

Zmień na:

<div id="stopka">
&copy; XXXXXXXXXXXXXXXXXXXXXXXXXXX
</div><!-- #stopka -->
</div><!-- #container --> 

(przenieś div zamykający kontener za stopkę).
a w css dodaj left: 0;
i usuń

margin-left: 200px;
margin-right: 200px;

A teraz mała uwaga.
Dobrą praktyką jest znaczenie zamykanych divów, czyli nie </div>
raczej </div><!-- #stopka -->
Inaczej możesz się pogubić w kodzie później.

Dobrą praktyką jest znaczenie zamykanych divów

Dobrą praktyką jest pisanie czytelnego kodu, wtedy rzadko przydaje się coś takiego.

Dodatkowo warto używać semantycznych tagów z HTML5 - footer, article, header, main, section, aside itd. - jako, że zazwyczaj nie wpycha się jednego bezpośrednio w drugi (czyli nie masz serii zamknięć tego samego tagu) - to w połączeniu z poprawnymi wcięciami - wszystko staje się ekstra czytelne.

Tak jak z prawdziwym programowaniem - jeżeli coś potrzebuje komentarza, to najprawdopodobniej jest po prostu nieczytelnie zapisane.