W3.css DIV margins and padding

I seem to be tying myself in a knot here! What I am trying to do is to make the Mobile rendering of a W3 Framework start at the left of the screen without a space.

Below is a DIV that over-rides the default margin of the W3.css DIV:

This DIV is used in pretty much all of my pages for containers and has a -16px over-ride

Also, I now know a bit more about the syntax. The margins can be specified singularly or as 2 3 and 4 values. These are seperated by spaces. What I was doing wrong was to seperate the values with commas.

What was happening was that I was struggling with spaces around W3.css containers. These looked like borders of blank screen around the DIV. In fact they were the default values of the margin(s) inherent in the W3.css container. On research these are 16px. I had seen these being over-ridden in the W3 template examples but it was never explained.

Inconsistant spaces around containers

I have been playing around with this for a while

The spacing has been fixed on this page and the template updated.

To get the sections of the page to not have a gap between them the margin style property needs to override the defaults of the w3-container.

The margin is specified in shortcut form with 3 values:

When I was trying to space the divs so that there was not a space between them I had to over-ride the margin property

4 Values - top, right, bottom, left
2 Values - top and bottom, left, right