I have no problem using Bootstrap with full width header background colours on larger devices, container-fluid sorts that out for me however what i am trying to achieve is that on resize down to smaller screen sizes (ie <768) that the full-width background is no longer full width and will have a left and right margin/gutter at the viewport edges.

Gives a centered header with a margin either side on larger viewports (which is what i want for small screens only) but when i resize viewport down the header becomes full width of the viewport.

What is the correct way to go about this?.. could i put a container inside another container and by using css and a media query change the background colour of the main container (ie: white) so that my inner-container (background-color black) would then be left and right margined/gutter. Maybe this is over engineering this issue or not even be semantic and someone can give me more insight,