That is because you kept the centering rule I gave you for your old system. If you use my second suggestion, do not use the @media rule for the centering and bullets.
So remove these two rules
@media only screen and (max-width:500px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2 {width:100%;}
} /*Change the 500px threshold to what you want or the sum of both min-width above (in this case 300+200)*/
@media only screen and (max-width:640px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2, #sidebar_header .header-widget-3 {width:100%;text-align:center;}
#sidebar_header .header-widget-1 ul {list-style:none;}
}
Instead only use
@media only screen and (max-width:640px) {
#sidebar_header .header-widget-1, #sidebar_header .header-widget-2 {margin-left:3%;margin-right:3%;width:42%;}
}