Responsive CSS behaviour of a centered image - html

Question

I cannot get the image container (.colored-logo) to span the width of the browser when I shrink it to mobile size. I have created a fiddle here so you can see the behaviour.
Apologies but I have placed all my CSS in here to make sure that whatever it is affecting it is included.
I am working on an email template and I am centering horizontally and vertically a logo into a boxed area with rounded corners.
My HTML is:
<div class="row invoice-top-header">
<div class="column third colored-logo">
<div class="logo">
<span class="image-center"></span><img src="http://s24.postimg.org/ebd3rwub5/fresh_creations_logo.png"/>
</div>
</div>
<div class="column third">...</div>
<div class="column third">...</div>
</div>
The row class adds a 15px internal padding which I offset in the container (colored-logo) with a -15px margin left and right.
The CSS I apply is this:
.colored-logo {
background: #989898;
height: 128px;
margin: 0px -15px 10px -15px;
padding: 15px;
width: 100%;
}
.logo {
white-space: nowrap;
text-align: center;
}
.image-center {
display: inline-block;
height: 100%;
vertical-align: middle;
}
Why is the logo container (div with class colored-logo, dark grey background) not filling the browser horizontally once in mobile mode? It looks to be 30px too short to cover the browser horizontally.Thanks!

Answer 1

It seems you have padding both to your row class and your column.
Try this css if you want your changes to take effect only in mobile screens:
#media screen and (max-width: 640px) {
.colored-logo, .row {
padding: 0;
margin: 0;
}
}

Answer 2

<div class="invoice-top-header">
<div class="column third colored-logo">
<div class="logo">
<span class="image-center"><img src="http://s24.postimg.org/ebd3rwub5/fresh_creations_logo.png"/>
</div>
</div>
<div class="row">
<div class="column third">
<div class="biller-details">
<span><strong>BILLER NAME PTY LTD</strong></span>
<span>ADDRESS LINE 1</span>
<span>ADDRESS LINE 2</span>
<span class="desktop">TEL: [phone]</span>
<span class="mobile">TEL: [phone]</span>
<span>ABN: 12345678</span>
<span>ACN: 09876543</span>
<span>sample#email.com</span>
<span>my-website.com.au</span>
</div>
</div>
<div class="column third">
<div class="customer-details">
<span><strong>CUSTOMER NAME PTY LTD</strong></span>
<span>ADDRESS LINE 1</span>
<span>ADDRESS LINE 2</span>
<span class="desktop">TEL: [phone]</span>
<span class="mobile">TEL: [phone]</span>
<span>ABN: 12345678</span>
<span>ACN: 09876543</span>
<span>sample#email.com</span>
<span>customer-website.com.au</span>
</div>
</div>
</div>
</div>
Change your HTML into this one above
Remove margin css property from .colored-logo
If you are coding a newsletter you should really consider using tables and avoid css3 properties as many of the email clients still doesnt support lot of things. Here you can find a list with email clint which does and doesnt support media queries:
https://litmus.com/help/email-clients/media-query-support/
Just tested and it works

Answer 3

Disabling these values / properties seems to work
.row {
margin: 0 auto;
/* padding: 15px; */
max-width: 1040px;
width: 100%;
}
.colored-logo {
background: #989898;
height: 128px;
/* margin: 0px -15px 10px -15px; */
padding: 15px;
width: 100%;
}
Just adjust as required in your media queries.
JSfiddle Demo