Hi Rob,
You could make use of some custom CSS to widen the header image so that it takes up 100% of your screen’s width.
To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)
Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:
@media screen and (min-width: 1230px) {
.site {
width: 100%;
}
#masthead, .content-wrapper, .grid-area, footer {
width: 1230px;
display: block;
margin-left: auto;
margin-right: auto;
}
}
The above will increase the width of the header image to 100% for devices that are 1230px in width or larger.
Increasing the width of the header image for smaller devices would require some further experimentation with CSS media queries. The testing and experimentation that that would require across different devices goes beyond the scope of support that this forum is intended for. If want to give it a go yourself, however, then the following are helpful resources:
Hope that information is helpful! ??
