Post Images Won't Center Despite CSS

OK. So, I built my own WP theme completely from scratch (www.ourhomefromscratch.com) and I’m having issues getting the post images to center using the aligncenter class, despite calling it out in the CSS. Most of the time I’m using images that are close to the total width of the main post area, so you can’t really tell it’s not centered. BUT, when I add smaller images, they are clearly aligned left. My work around for this has been to center them using HTML center commands.

I’m attaching my CSS for reference. Note that I’m using CSS with fluid grid layout for mobile.

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

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
}

The post content sits in a #main div, which is styled:

‘#main {
clear: none;
float: left;
margin-left: 4%;
width: 63%;

}’

Any help would be greatly appreciated!!