I recently created a practice website using the new Foundation xy grid. However, I noticed that when I resize the browser to a smaller screen size, the images are no longer centered and instead hug the left side of the page. It's only when I make the screen as small as possible that the images finally center properly. I'm not sure what I did wrong, as I have applied the align-center class to the parent element.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<header class='header grid-x align-center align-middle'>
<div class='cell shrink'>
<h1>Our Site</h1>
</div>
</header>
<div class='grid-container'>
<div class='main-content grid-x grid-padding-x align-center'>
<div class='cell shrink'>
<h3 class='pad'>What We Are</h3>
</div>
</div>
</div>
<div class='grid-container'>
<div class='grid-x grid-padding-x align-center'>
<div class='cell medium-4'>
<img src="http://skirogaining.tojnar.cz/gpx/gpx-web.svg" alt=''>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class='cell medium-4'>
<img src="http://skirogaining.tojnar.cz/gpx/gpx-web.svg" alt=''>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class='cell medium-4'>
<img src="http://skirogaining.tojnar.cz/gpx/gpx-web.svg" alt=''>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>