Alignment problem with cherry plugin shortcode vs css

Hi I am having trouble making the content on this page align. I’m fairly new to shortcodes and they seem to conflict with css as I understand it (possibly not as well as I think I understand it!) This is the page:

http://aca.hi-speedinter.net/schedule-data-2/

I’m using a TemplateMonster theme that uses the Cherry plugin: http://www.templatemonster.com/demo/41574.html

Here is the code:

<div style="width: 90%; margin: 0 auto; text-align: center;">
<div style="width: 80%; margin: 0 auto; text-align: center;">
<h2>Schedule Data</h2>
[box][grid_5][box_with_shadow]<img class="size-full wp-image-122 alignleft" src="http://aca.hi-speedinter.net/wp-content/uploads/2014/09/australia.png" alt="australia" width="256" height="257" />[clear]Australia[/box_with_shadow][/grid_5][grid_5][box_with_shadow]<img class="size-full wp-image-124 alignright" src="http://aca.hi-speedinter.net/wp-content/uploads/2014/09/phillipines.png" alt="phillipines" width="255" height="255" />[clear]Phillipines[/box_with_shadow][/grid_5][clear][spacer][grid_5][box_with_shadow]<img class="alignleft size-full wp-image-125" src="http://aca.hi-speedinter.net/wp-content/uploads/2014/09/united_arab_emirates.png" alt="united_arab_emirates" width="255" height="255" />[clear]United Arab Emirates[/box_with_shadow][/grid_5][grid_5][box_with_shadow]<img class="alignright size-full wp-image-123" src="http://aca.hi-speedinter.net/wp-content/uploads/2014/09/oman.png" alt="oman" width="255" height="255" />[clear]Oman[/box_with_shadow][/grid_5][/box]
</div>
</div>

Can anyone help me make it look neat and tidy and center aligned? The buttons will ultimately be links to other pages

Thanks in advance!