How to create 100% width bakcground color of heading(text) in Bootstrap?

I would like to have a full width background-color for an h1, but I just cant seem to achieve it, it always stays at the width of col-12, not 100% width.

I could get it work with margin-left:-9999px and margin-right:-9999px but it ruins the h1's responsibility. Could you help me please? I tried placing width:100% pretty much everywhere