I am using Chrome Dev tools and have identified that, below 768px width, the margins at the left and write of my pages disappear. All images and text in these pages becomes the full 100% width of the screen. AT 768px and above, I have lovely margins at left and right with images and text taking up about 85% of the screen width.

Somewhere in a media query, something is happening to remove those margins/white space. It may be more complex: it may be a different grid layout all together below 768px.

I am in Chrome Dev Tools, using responsive view, with show media queries enabled.

My problem is that I cannot pin down the CSS that is making the change. I am using the media query bars at the top of the screen to show me which queries are involved but when I right click the coloured bars to identify the CSS involved, there are many CSS declarations in the MDB CSS files which reference that width and much CSS code within each declaration.

Can anyone point me in the right direction? Why do the left and right white space disappear below 768px in the Pro SAAS template?

Cheers, Mike