How do I center the logo?

I currently have this Custom CSS code on my site

.logo img {
width: 140px;
margin-left: 365px;
margin-top: 5px;
}

and it looks great using a traditional browser. However it looks off center on the ipad and mobile? I there something I can do to apply it to all three?

my website is http://www.farmhousecheeses.com


Thanks,
Chris

 

Hello,

Paste this code in Custom CSS
Appearance > Theme Option > Styling Option > Custom CSS

Code:

@media only screen and (max-width: 959px) and (min-width: 768px){
.logo img {
margin-left: 287px!important;}}
 
@media only screen and (max-width: 767px) and (min-width: 480px){
.logo img {
margin-left: 0px!important;
}