Angular Material layout test - Cards always center with layout-wrap

<!DOCTYPE html>
<html>

  <head>
      <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-aria.js"></script>
      <!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
      <script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
      <script type="text/javascript" src="https://js.stripe.com/v2/stripe-debug.js"></script>
      <script type="text/javascript" src="app.js"></script>
  </head>

  <body ng-app="app" ng-controller="appCtrl">
      <md-toolbar>
          <div class="md-toolbar-tools">
              <h2 flex>Hello Angular-material!</h2>
          </div>
      </md-toolbar>
      <div class="container-fluid">
        <section class="content-section gridListdemoBasicUsage">
          <div class="row">
            <div class="col-sm-8 col-sm-offset-2">
              <h1 class="text-center">The Different Ways SharePoint can help define your business</h1>
              <!-- Separator -->
              <md-divider ng-style="{'background': 'rgba(255, 102, 51, 0.7)'}"></md-divider>
            </div>
          </div>
          <div layout="column" layout-align="center" ng-style="{'width': '100%'}" ng-controller="appCtrl as spcVm">
            <div class='md-padding' layout="row" layout-align="center" flex-offset-sm="0" flex-offset-md="0" flex-offset-lg="0" flex-offset-gt-lg="0" layout-wrap>
              <md-card class="md-whiteframe-9dp" ng-style="{'width': '350px', 'border-radius': '6px'}" ng-repeat="card in spcVm.serviceCards" layout-padding>
                <md-card-content>
                  <h4 class="md-title">{{card.title}}</h4>
                  <md-divider ng-style="{'background': 'rgba(255, 102, 51, 0.7)'}"></md-divider>
                  <br />
                  <p>{{card.mainContent}}</p>
                </md-card-content>
                <md-card-footer>
                  <div class="md-actions" layout="row" layout-align="center end">
                    <md-button ng-click="card.action($event)">View</md-button>
                  </div>
                </md-card-footer>
              </md-card>
            </div>
          </div>
        </section>
      </div>
  </body>
</html>

/* Put your css in here */

var app = angular.module('app', ['ngMaterial']);

app.run(function($log) {
    $log.debug('App Run');
});

app.controller('appCtrl', function($scope, $mdDialog) {
  var vm = this;
  
  var action = function(event) {
      $mdDialog.show(
        $mdDialog.alert()
        .title('Secondary Action')
        .content('Secondary actions can be used for one click actions')
        .ariaLabel('Secondary click demo')
        .ok('Neat!')
        .targetEvent(event)
      )
  }

  vm.serviceCards = [
    {
      link: '#',
      imagePath: '#',
      imageAlt: '',
      title: 'Document Management',
      mainContent: 'Improve the way you manage and work with documents with features like document, versioning, document workflow, document tagging, offline synchronisation',
      action: action
    }, {
      link: '#',
      imagePath: '#',
      imageAlt: '',
      title: 'Business Intelligence',
      mainContent: 'Connect to your business data either in line of business databases, spreadsheets or lists and surface valuable business intelligence in intuitive dashboards',
      action: action
    }, {
      link: '#',
      imagePath: '#',
      imageAlt: '',
      title: 'Electronic Forms & Business Process Automation',
      mainContent: 'Develop electronic forms for capturing and processing information to streamline business processes such as Staff time off requests and time sheets',
      action: action
    }, {
      link: '#',
      imagePath: '#',
      imageAlt: '',
      title: 'Use Social Communications',
      mainContent: 'Share Ideas, discover answers and keep track of what your colleagues are working on with new Social Features throughout SharePoint',
      action: action
    }, {
      link: '#',
      imagePath: '#',
      imageAlt: '',
      title: 'Keeping The Team Connected',
      mainContent: 'Bring together your team by storing information and documents in one cloud based location and stay connected with SharePoint\'s powerful collaborative features',
      action: action
    }, {
      link: '#',
      imagePath: '#',
      imageAlt: '',
      title: 'Build Cloud plugins to enhance functionality',
      mainContent: 'Using common Web technologies like JavaScript and HTML build cost effectively build custom apps in the cloud to improve the way you do business',
      action: action
    }, {
      link: '#',
      imagePath: '#',
      imageAlt: '',
      title: 'eDiscovery and In-Place Holds',
      mainContent: 'Electronic discovery, or eDiscovery, is the process of identifying and delivering electronic information that can be used as evidence',
      action: action
    }, {
      link: '#',
      imagePath: '#',
      imageAlt: '',
      title: 'Enterprise Search',
      mainContent: 'SharePoint contains a solid, scalable search engine capable of indexing and querying very large data sets. With SharePoint Enterprise Search, you can not only provide tailored results to your users, but provide rankings, capture search keywords and ingest external content as well',
      action: action
    }
  ];
});