I would do something like this:
.gallery {
margin: 0 -10px;
}
.gallery-item {
margin: 10px;
}
That way you give the items an even margin all round, which still results in a gap of 20px, and you make the edges align with your content by making the wrapper 10px larger then the content area at each side.
(have a look at you HTML, <dl
> does not seem really appropriate for a gallery item)
In your code, that would look something like this:
.gallery {
float: left;
/* margin-bottom: 20px; */
margin: 0 -10px;
}
/*.gallery br {
display: none;
}*/
.gallery .gallery-item {
/* margin: 0 20px 20px 0 !important; */
margin: 10px;
width: 100%;
float: left;
position: relative;
overflow: hidden;
}
.gallery-columns-2 .gallery-item {
width: 50% !important;
}
.gallery-columns-3 .gallery-item {
width: 31.2% !important;