zrozumieć paddiding

Potrzebuje Waszej pomocy, czwarty dzień siedzę nad tym. nie potrafię znaleźć przyczyny, usuwając padding ze środkowej ramki (całaść ma 1920 pikseli w poziomie, to jest podzielone na 3 mniejsze ramki plus border lewy i prawy w ramce środkowej tylko, wszystko policzyłem odjąłem border środkowej ramki) przeliczałem to już ze sto razy a mimo to usuwając padding ze środkowej ramki zjedzie mi się to w lewo (o co tu chodzi)
to jest efekt jaki powinien być

usunę padding z tond, może mieć 50 px nie istotne, ale gdy go usunę ten jeden ostatni piksel, efekt jak na zdjęciu poniżej

, dlaczego przecież jestem w kontenerze, co ma padding w środkowym kontenerze do całości jak go nie ma wszystko mi ucieka do lewejj strony

#game-left{
	width: 609px;
	padding: 1px;  // ten padding
    float: left;}

zrobi się tak
https://zapodaj.net/7833454c2785f.jpg.html

<div id="game-container">

     <div id="game-top">
    </div>
 
     <div id="game-left">
     </div>

    <div id="game-centre">
      <div class="row">
       <div class="box1"><img src="img/Aris.png"><br/>Aris<br/>Salonikic</div>	
       <div class="box2">- : -</div>
       <div class="box3"><img src="img/Panathinaikos.png"><br/>Panathinaikos<br/>Ateny</div>
      </div>
    </div>
    
    
    <div id="game-right">
    	
    <div id="countDownBlock">
       <div id="clockdiv"> 
          <div>
             <span id="days"></span>
             <div class="text">Dni</div>
          </div>                   
           <div>
             <span id="hours"></span>
             <div class="text">Godzin</div>
           </div>
           <div>
             <span id="minutes"></span>
             <div class="text">Minut</div>
           </div>
           <div>
             <span id="seconds"></span>
             <div class="text">Sekund</div>
          </div>
        </div>
     </div> 
	</div>
       
      <div style="clear: both"></div>
 
     <div id="footer">
  	 </div>
     </div>
   </div>
</body>
</html>

CSS

*{
	padding: 0;
	margin: 0;}

body{
	background-image: url(img/dark_embroidery.png);}

#container{
	width: 1920px;
	margin-left: auto;
	margin-right: auto;}


#menu-container{
	background: #000000;
	border-bottom: 5px solid #cc9900;
	width: auto;
	height: 100px;}

#logo{
	margin-left: 7%;
	float: left;}


.menu{
	float: left;
	line-height: 60px;
	padding-left: 40px;
	padding-right: 20px;
	color: #cc9900;
	font-size: 24px;}

.menu a{
	text-decoration: none;
	color: #cc9900;}
.menu a:hover{
	color: #BB8800;}

#game-container{
	margin-top: 50px;
	background: #000000;
	color: white;
    width: 1920px;
    height: auto}

#game-top{
	height: 30px;
   background: #cc9900;  
   color: black;
   text-align: center;}

#game-left{
	width: 609px;
    padding: 1px;
	float: left;}

#game-centre{
	width: 609px;
	height: auto;
    float: left;}

#game-right{
	width: 600px;
	height: auto;
    float: left;}

#footer{
   height: 40px;
   background: #cc9900;  
   color: black;
   text-align: center;}

.row{
	display:flex;	
    border-left: 3px dashed #cc9900;
	border-right: 3px dashed #cc9900;
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;}

.box1{
   flex: 1;
    font-size: 20px;}

.box2{
	flex: 1;}

.box3{
   flex: 1;
   font-size: 20px;}

#clockdiv{
	font-family: sans-serif;
	display: inline-block;
	font-weight: 700;
	text-align: center;
	font-size: 30px;}
#clockdiv > div{   
	display: inline-block;	}
#clockdiv div > span{
    color: #FFFFFF;}
.text{
	font-size: 14px;}

pomijając błędy ortograficzne to niepotrzebnie stosujesz aż tyle id, ponadto poczytaj o gridzie css, rwd, podejrzyj skeletona, flexboxa, miligrama, zobacz jak to jest zrobione