title: Material Design Web 1.0 grid layout within card hangs on the left
body: <p>I am experimenting with Material Design Web 1.0 having the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8"/&gt;
      &lt;meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; script-src 'unsafe-inline' https://unpkg.com; style-src 'unsafe-inline' https://unpkg.com https://fonts.googleapis.com"/&gt;
      &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;Test&lt;/title&gt;
  
      &lt;link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/&gt;
      &lt;script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/&gt;
      &lt;style&gt;
        .my-card-content 
         {
          padding: 16px;
         }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="mdc-card my-card-content"&gt;
  
        &lt;div class="mdc-layout-grid"&gt;
          &lt;div class="mdc-layout-grid__inner"&gt;
            &lt;div class="mdc-layout-grid__cell"&gt;&lt;label class="mdc-floating-label" for="username"&gt;Username&lt;/label&gt;&lt;/div&gt;
            &lt;div class="mdc-layout-grid__cell"&gt;
              &lt;div class="mdc-text-field"&gt;
                &lt;input type="text" id="username" class="mdc-text-field__input" required  tabindex="0"&gt;
                &lt;div class="mdc-line-ripple"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="mdc-layout-grid__inner"&gt;
            &lt;div class="mdc-layout-grid__cell"&gt;&lt;label class="mdc-floating-label" for="password"&gt;Password&lt;/label&gt;&lt;/div&gt;
            &lt;div class="mdc-layout-grid__cell"&gt;
              &lt;div class="mdc-text-field"&gt;
                &lt;input type="password" id="password" class="mdc-text-field__input" required  minlength="8"  tabindex="0"&gt;
                &lt;div class="mdc-line-ripple"&gt;&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>What I really wanted is to have the Username/Password labels/fields centered within the card, but it looks like this at the moment:</p>
  
  <p><a href="https://i.stack.imgur.com/Fbe2Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fbe2Z.png" alt="enter image description here"></a></p>
  
  <p>I find it strange that the username/password labels hang left outside of the card ...</p>
  
  <p>How to change the layout to be as I expected? Is there a way to do this without the grid layout?</p>