Material Design Lite Hamburger not centered

<html>
<head>
<title>Gun Problems</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
	.createbutton	{ position:fixed; bottom:2%; right:2%; z-index: 10;}
</style>

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.lime-red.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Gun Problems</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation. We hide it in small screens. -->
      <nav class="mdl-navigation mdl-layout--large-screen-only">
        <a class="mdl-navigation__link" href="index.html">Home</a>
        <a class="mdl-navigation__link" href="wbsmcreate.html">Add Problem</a>
        <a class="mdl-navigation__link" href="wbsmgun.html"><b>Gun Problems</b></a>
        <a class="mdl-navigation__link" href="wbsmsled.html">Sled Problems</a>
        <a class="mdl-navigation__link" href="wbsmcat.html">Cat Problems</a>
      </nav>
    </div>
  </header>

  <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Gun Problems</span>
    <nav class="mdl-navigation">
      <a class="mdl-navigation__link" href="index.html">Home</a>
      <a class="mdl-navigation__link" href="wbsmcreate.html">Add Problem</a>
      <a class="mdl-navigation__link" href="wbsmgun.html"><b>Gun Problems</b></a>
      <a class="mdl-navigation__link" href="wbsmsled.html">Sled Problems</a>
      <a class="mdl-navigation__link" href="wbsmcat.html">Cat Problems</a>
    </nav>
  </div>
  <main class="mdl-layout__content">

<div class="createbutton">
<!-- Colored FAB button -->
<a href="https://link.com">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
  <i class="material-icons">edit</i>
</button>
</a>
</div>

<iframe height="90%" src="link.com"></iframe>

  </main>
</div>

</body>
<html>