gallery / featured image width

I can see my problem now. There is a right hand margin of the gallery that is within the content-area. could I lose this with overflow hidden somehow?

solved.
.gallery-item {
margin: 0em 0em 0em 0em;
padding: .4em .4em .4em .4em;
}

Not so great. It only looks ok in desktop view. Just as ugly for tablet and mobile. Best think of something else.

You are wanting to align the right side of the featured image to be flush with the right side of the last gallery thumbnail?

.home .gallery {
margin-right: -0.5em;
}
@media screen and (min-width: 30em) {
.home .gallery {
margin-right: -1em;
}
}

The first part is for phones and tablets while the second part is for any screen larger than 30em. What this does is stretches the gallery container off to the right a bit more as a small negative margin.

Try that and see if that helps.

Hi. Due to my limited understanding, I asked pretty much the same question in this forum. I got a number of replies that have fixed my issues. Thank you.

This is the css I put in the customiser. It removes the right margin space and forces single column in mobile view. Quite elegant.

.gallery-item { margin-right: 4%; padding-right: 0; width: 48%;}
.gallery-item:nth-child( 2n ) { margin-right: 0; }
@media screen and (min-width: 30em) {
.gallery-columns-3 .gallery-item { padding-right: 0; width: 32%; margin-right: 2%; }
.gallery-columns-3 .gallery-item:nth-child( 3n ) { margin-right: 0; }
}
@media screen and (max-width: 30em) {

.gallery-columns-3 .gallery-item {
min-width: 100%;
}
}