Şu Css sorununu nasıl çözebilirim acaba?

@media only screen and (max-width: 768px){

.bilgi {float:left;width:95%;margin-top:10px;padding-left:9px;}
.bilgi table{width:100%;}
.bioresim{width:100%;}
.onresim{width:92%;}
}

@media only screen and (max-width: 320px){
.onresim{padding-left:9px;}
.bioresim{width:100%;}
.bilgi{width:95%;}
}

kod bunlar burada bilgi kısmında bir tablo var onresim yazanda resim oluyor.bu tablo ve resim hem sağ boşluk hem de sol boşluk eşit olsun istiyorum ama birtürlü yapamadım leftte sorun yok ama right kısmı kafasına göre genişlik alıyor.nasıl düzenlemem gerek acaba bu kodu?

padding veya float ile çözülür diye tahmin ediyorum. Görme şansım var mı?

@media only screen and (max-width: 768px){
.bilgi {float:left;width:100%;margin-top:10px;}
.bilgi table{width:100%;}
.bioresim{width:100%;}
.onresim{width:100%; margin: 0 auto; text-align: center;}
.onresim img { width: 100%; height: auto; margin: 0 auto;}
}

Genişlik ve sağ sol padding değerlerini en dışta saran bir div ekleyerek halledebilirsiniz. Mantık olarak bu şekilde genişlik istediğiniz px geldiği zaman görsel ortalı olarak gözükür.

Padding yerine margin kullanarak dener misin birde?

onresim e padding-left: 9px yerine şunu ekleyebilirsiniz:
padding: 0 4%;