CSS issue

Hi everyone,

I’m having issues with changing the CSS of the image. Essentially I have a black text box that overlays the image.

However the black box is kinda just sitting in the middle, any idea on how to stretch it across?

Here’s the CSS code:

.av-masonry-entry .av-inner-masonry-content {
text-align: center;
width: 100%;
font-weight: bold;
background-color: transparent !important; }
.av-masonry-entry .avia-arrow { display: none; }

.av-masonry-entry .av-masonry-entry-title {
font-size: 20px;

background: rgba(0,0,0,0.7);
padding: 10px;
color: white;
full-width;
margin-bottom: 0%; }