Adding caption to side-by-side photos in Wordpress shifts one photo to left margin

Question

To get two images side by side in Wordpress (2014 theme), I add a div to clear after the images like so and it works:

<a href="/image1.jpg"><img  align="alignleft" src="/image1.jpg" alt="" width="225" height="400" /></a> 

<a href="/image2.jpg"><img align="alignright" src="/image2.jpg" alt="" width="225" height="400" /></a>

<div class="clear"></div>

But if I add a caption to the photos, the image on the left side shifts to the left margin, further than the specified entry-content div.

[caption id="" align="alignleft" width="302"]<a href="/image1.jpg"><img src="/image1.jpg" alt="" width="225" height="400" /></a> Caption here[/caption]

[caption id="" align="alignright" width="302"]<a href="/image2.jpg"><img src="/image2.jpg" alt="" width="225" height="400" /></a> Caption here[/caption]

<div class="clear"></div>

CSS:

img.alignleft {
float: left;
margin-right: 12px;
}

img.alignright {
float: right;
margin-left: 12px;
}

img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

a img.alignright {
float: right;
margin-left: 12px;
}

a img.alignleft {
float: left;
margin-right: 12px;
}

a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}

.clear {
clear: both;
}

What needs to be adjusted?

Answer 1

Richer St-Amand is right. But the problem is that there are two rules inside a media-query, starting on line 3462 of the themes style.css:

/* Line 3492 */
.full-width .site-content .wp-caption.alignleft {
    margin-left: -168px;
}
/* Line 3504 */
.full-width .site-content .wp-caption.alignright {
    margin-right: -168px;
}

This rules can easily be overwritten with something like this:

.full-width .site-content .wp-caption.alignleft,
.full-width .site-content .wp-caption.alignright {
    margin: 0;
}

Answer 2

When you use caption image, Wordpress build some HTML for you. With this, WordPress also have CSS for each alignment option.

To overwrite these, add this code to your child theme style.css :

.wp-caption.alignright {
    float: right !important;
    margin-right: -12px !important;
}

.wp-caption.alignleft {
    float: left !important;
    margin-left: -12px !important;
}