Ionic grid not automatically preserve row spacing between grids?

I am beginner for Ionic mobile framework.Now I start to learn ionic in the http://ionicframework.com/ site.I try to do create a mobile app from this site,the elements are overlapped with other fields.Please give me a formatted structure of a simple application and the link of the ionic framework site link for learning

enter image description here

My code:

<!DOCTYPE html>
<html>

<head>
<title>Blank Hybrid App Project Template</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/ionic.min.css" />
<style>
    @-ms-viewport { width: 100vw ; zoom: 100% ; }
    @viewport { width: 100vw ; zoom: 100% ; }
    @-ms-viewport { user-zoom: fixed ; }
    @viewport { user-zoom: fixed ; }
</style>
<link rel="stylesheet" href="css/app.css">
</head>

<body>
    <div class="bar bar-header bar-positive">
            <h1 class="title">Header</h1>
    </div>
    <div class="card">
          <div class="item item-divider">
            I'm a Header in a Card!
          </div>
          <div class="item item-text-wrap">
            This is a basic Card with some text.
          </div>
          <div class="item item-divider">
            I'm a Footer in a Card!
          </div>
    </div>
    <div class="tabs tabs-icon-top tabs-positive">
      <a class="tab-item"><i class="icon ion-home"></i>Home</a>
      <a class="tab-item"><i class="icon ion-star"></i>Favorites</a>
      <a class="tab-item"><i class="icon ion-gear-a"></i>Settings</a>
    </div>
 <script src="js/jquery-2.1.1.min.js"></script>
 <script src="js/ionic.bundle.min.js"></script>
 <script src="js/ionic-angular.min.js"></script>
 <script src="js/ionic.min.js"></script>
</body>
</html>