Your CSS needs help. I could only find one example of an image with text, the one that's in the first screen shot. Your CSS for images in posts automatically floats it left, however you've added the class="right" to the image, which does nothing, as it appears you've drop that from the style sheet.
A quick CSS primer, when using padding and margins, you can define top, right, bottom, left margins in one declaration (in that order).
So your CSS is floating the image to the left, but giving the right margin 0. Change that to margin: 0 5px 1px 3px and you should have a 5px gap between the images and the text.
A better approach would be delete that .post img and create two classes, .left and .right.
If it was me, I'd do
.left {
float: left;
border:1.5px solid <?php echo $water_maincolor_1; ?>;
padding: 2px;
margin: 0 5px 0 5px;
}
and
.right {
float: right;
border:1.5px solid <?php echo $water_maincolor_1; ?>;
padding: 2px;
margin: 0 5px 0 5px;
}
Then add the class the img tag (<img class="left" src="http://example.com/image.jpg" alt="image" />). That way, if you want the image to the right of the text, it will float over, and give some space, likewise to the left.
I added 2px of padding between the border and image, but that's a personal preference.
Obviously the space can be adjusted to your liking.
