possible CSS:

#WideBar {
    position: relative;
    /* left: -50%; */
    /* right: -50%; */
    /* width: 200%; */
    margin: auto;
    /* height: auto; */
}

you can consider deleting the commented out bits

okay, are you able to move the item so it’s within a full bar?

<div id="WideBar">
<h1>WHAT IS CELLULAR DAS?</h1>
</div>

which is in here

<div class="enigma_blog_post_content">
<div id="WideBar">
<h1>WHAT IS CELLULAR DAS?</h1>
</div>
</div>

to inside this

<div class="enigma_header_breadcrum_title">
  <div id="WideBar">
<h1>WHAT IS CELLULAR DAS?</h1>
</div>
</div>

it may be something you need to look into in the template file(s)

DIV
<div id=”WideBar”>
<h1>What is Cellular DAS?</h1>
</div>
<div id=”spacer”></div>

CSS
#WideBar{
position: absolute;
left: -50%;
right: -50%;
width: 200%;
margin: 0;
background-color: #31A3DD;
}

#WideBar h1 {
color: #ffffff;
text-align: center;
font-size: 33px;
}

#spacer {
clear:both;
display:block;
font-size:0;
line-height:0;
padding:35px 0 55px 0;
margin:0;
}

@media screen and (max-width: 480px) {
#WideBar{
left: -2px;
right: 0px;
width: 200%;
margin: 0;
}

#WideBar h1 {
text-align: left;
padding: 5px 0 0 10px;
}

}

@media screen and (max-width: 460px) {
#WideBar{
left: -2px;
right: 0px;
width: 430px;
margin: 0;
}

#WideBar h1 {
text-align: left;
padding: 5px 0 0 10px;
font-size: 30px;
}

#spacer {
clear:both;
display:block;
font-size:0;
line-height:0;
padding:65px 0 65px 0;
margin:0;
}
}

@media screen and (max-width: 380px) {
#WideBar{
left: -2px;
right: 0px;
width: 360px;
margin: 0;
}

#WideBar h1 {
text-align: left;
padding: 5px 0 0 10px;
font-size: 29px;
}

#spacer {
clear:both;
display:block;
font-size:0;
line-height:0;
padding:70px 0 70px 0;
margin:0;
}
}