- Twój container nic nie robi
- styluj klasami nie id
- ogólnie chaos niesamowity, pół css do wywalenia tak naprawdę
- wywal center i rób to w cssie
- cały Twój problem to pływające elementy (float) które mają ustaloną szerokość sztywno w px na taką jaka Tobie odpowiadała na monitorze
- rozwiązanie? poczytaj o float dlaczego dzieje się tak a nie inaczej http://webkod.pl/kurs-css/wlasciwosci/pozycja/float
możesz zainteresować się gridami, czy flex-boxem
//edit ogólnie rzecz biorąc, container powinien być jakby maksymalną szerokością i często jest to 960px, albo troche więcej jak 1170px, po co to? Gwarantuje że strona zawsze będzie wyglądać tak jak zakodowaliśmy jeżeli będzie miała więcej niż 960px po prostu po bokach będzie przestrzeń. Można oczywiście zrobić stronę tak, że nie mamy przestrzeni po bokach tylko całość rozciągniętą, ale tutaj już trzeba wiedzieć więcej, żeby zrobić to dobrze dla różnych rozdzielczości, a na pewno nie używać wszędzie sztywnych px.