title: My website looks different in Firefox from Chrome
body: <p>I've been working on a webpage on Chrome and realized it doesn't look the same in Firefox. I have simplified my code to show the problem. It seems the last  is not displayed in Firefox whilst it is visible in Chrome.</p>
  
  <p>Here is my html file.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;meta charset="utf-8"&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  
  
  
    &lt;div id=shipBoard align="right" style="overflow: hidden"&gt;
  
      &lt;div id="ship" style="float: left;"&gt;
        &lt;img src="carrier.jpg" style="width:100px;height:100px;"&gt;
      &lt;/div&gt;
  
      &lt;div id="ship" style="float: left;"&gt;
        &lt;img src="destroyer.jpg" style="width:100px;height:100px;"&gt;
      &lt;/div&gt;
  
      &lt;div id="ship" style="float: left;"&gt;
        &lt;img src="test.jpg" style="width:100px;height:100px;"&gt;
      &lt;/div&gt;
  
      &lt;div id="ship" style="float: left;"&gt;
        &lt;img src="battleship.jpg" style="width:100px;height:100px;"&gt;
      &lt;/div&gt;
  
      &lt;div id="ship" style="float: left;"&gt;
        &lt;img src="sub.jpg" style="width:100px;height:100px;"&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And here is the css file:</p>
  
  <pre><code>#ship {
    position: relative;
    width: 4cm;
    height: 5cm;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
  }
  
  #shipBoard {
    position: relative;
    width: 20cm;
    height: 5cm;
    margin-left: auto;
    margin-right: auto;
    background-color: green;
  }
  </code></pre>
  
  <p>What can I do to make them the same?</p>