title: Unusual indentation
body: <p>On my site, <a href="http://matprichardson.co.uk" rel="nofollow noreferrer">matprichardson.co.uk</a>, when you click the 'help' button in the dialog in the center of the screen, another dialog pops up containing some content.</p>
  
  <p>For some reason, when this happens, the first two lines of the first paragraph element are strangely indented, as well as the header, which is normally centered.</p>
  
  <p><img src="https://i.stack.imgur.com/9YonE.jpg" alt="enter image description here"></p>
  
  <p>I've looked at my markup and css a number of times now and I'm really struggling to see why this is happening.  Could somebody please point me in the right direction?</p>
  
  <p>CSS</p>
  
  <p>body {
      margin: 0;
      padding: 0;
  }</p>
  
  <pre><code>#maincontainer {
    font-family: arial;
    margin-bottom: 20px;
  }
  
  .dialog {
    border: 5px solid black;
    display: inline-block;
    background-color: white;
  }
  
  
  .dialog p, .dialog ul {
      font-family: "Courier New";
      font-size: 12px;
  }
  
  .dialogtitle h2 {
    margin: 0;
    padding: 1px 0;
    font-family: "courier new";
    font-size: 12px;
    background-color: black;
    color: white;
    text-align: center;
  }
  
  .dialogtitle {
    cursor: move;
  }
  
  .dialogcontent {
    margin: 10px;
  }
  
  .windowsbutton{
    width: 70px;
    height: 22px;
    font-family: "courier new";
    font-weight: bold;
    font-size: 12px;
    border-width:2px;
    border-top: 2px solid white;
    border-left: 2px solid white;
  }
  
  .buttonsurround {
    border: 1px solid black;
    max-width: 70px;
    border-radius:3px;
    display: inline-block;
    margin: 0 10px;
  }
  
  .buttonselected {
    border-width: 2px;
  }
  
  .windowsbutton:focus {
    outline: none;
  }
  
  
  #maindialog {
      position: absolute;
      top: 220px;
      left: 50%;
      margin-left: -150px;
  }
  
  #helpdialog {
      display: none;
      width: 500px;
      top: 70px;
      left: 110px;
  }
  
  #helpClose {
      margin:0 200px;
  }
  
  
  /*Menu*/
  #menu {
      margin: 0 0 20px 0;
      padding: 0;
      height: 30px;
      background-color: black;
      width: 100%;
  }
  
  
  
  /*Icons*/
  .iconcontainer {
    width: 80px;
    float: left;
  }
  
  .iconcontainer:hover {
      cursor:pointer;
  }
  
  .foldericon {
    height: 40px;
    width: 40px;
    border: 2px solid black;
    border-radius: 0 0 10px 0;
    text-align: center;
    margin: 0 auto;
    background-color: white;
  }
  
  .iconhead {
    height: 10px;
    border-bottom: 2px solid black;
    background-color:black;
  }
  
  .foldertext {
    margin-top: 5px;
  }
  
  .iconcontainer h1 {
    font-family: "Courier New";
    font-size: 12px;
    text-align: center;
    margin: 0;
    padding: 0;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Mat Richardson&lt;/title&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="https://code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="maincontainer"&gt;
  
          &lt;div id="menu"&gt;
  
          &lt;/div&gt;
  
          &lt;!--an icon.  Lovely, isn't it?--&gt;
          &lt;div class="iconcontainer" id="blog"&gt;
              &lt;div class="foldericon"&gt;
                  &lt;div class="iconhead"&gt;
                  &lt;/div&gt;
                  &lt;div class="iconmain"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="foldertext"&gt;
                  &lt;h1&gt;blog&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="iconcontainer" id="pictures"&gt;
              &lt;div class="foldericon"&gt;
                  &lt;div class="iconhead"&gt;
                  &lt;/div&gt;
                  &lt;div class="iconmain"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="foldertext"&gt;
                  &lt;h1&gt;pics&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="iconcontainer" id="websites"&gt;
              &lt;div class="foldericon"&gt;
                  &lt;div class="iconhead"&gt;
                  &lt;/div&gt;
                  &lt;div class="iconmain"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="foldertext"&gt;
                  &lt;h1&gt;websites&lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
  
  
  
  
  
          &lt;div id="maindialog" class="dialog"&gt;
              &lt;div class="dialogtitle"&gt;
                  &lt;h2&gt;Welcome to matprichardson.co.uk&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="dialogcontent"&gt;
                  &lt;div class="buttonsurround buttonselected"&gt;&lt;input type="button" id="mainOK" value="OK" class="windowsbutton" /&gt;&lt;/div&gt;
                  &lt;div class="buttonsurround"&gt;&lt;input type="button" value="Cancel" id="mainCancel" class="windowsbutton" /&gt;&lt;/div&gt;
                  &lt;div class="buttonsurround"&gt;&lt;input type="button" value="H&amp;#818elp" id="mainHelp" class="windowsbutton" /&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="helpdialog" class="dialog"&gt;
              &lt;div class="dialogtitle"&gt;
                  &lt;h2&gt;Help&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="dialogcontent"&gt;
                  &lt;p&gt;Welcome to the personal site of Mat Richardson.  There's not much to see right now,
                  but do feel free to have a click about.&lt;/p&gt;
                  &lt;p&gt;Some links you might want to visit (or not, your choice):&lt;/p&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="http://2toria.com"&gt;2toria&lt;/a&gt; (another site I own)&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://codepen.io/2toria/"&gt;My Codepen Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="http://stackoverflow.com/users/1373484/mat-richardson"&gt;My StackOverflow Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://twitter.com/matprichardson"&gt;My twitter account&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://www.linkedin.com/profile/view?id=117558046&amp;trk=nav_responsive_tab_profile"&gt;My LinkedIn Profile&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;div id="helpClose" class="buttonsurround buttonselected"&gt;&lt;input type="button" value="Close" class="windowsbutton" /&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>