title: Why do my CSS elements not align with the top of the web page?
body: <p>For some reason, the element I have in the example image will not align with the top of the page. I haven't worked with HTML/CSS in awhile but I can't see anything coding-wise that would shift the rectangle down ~5px. <img src="https://i.stack.imgur.com/HnZgi.jpg" alt="enter image description here"></p>
  
  <p>I'm trying to achieve the bar on this page: <a href="http://gradients.glrzad.com/" rel="nofollow noreferrer">http://gradients.glrzad.com/</a></p>
  
  <p>Here's my code.
  HTML:</p>
  
  <pre><code>&lt;!DOCTYPE "html"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Mobile Site&lt;/title&gt;
  &lt;link href="mobileCSS.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="titleBar"&gt;
  &lt;strong&gt;Coles Web&lt;/strong&gt;
  &lt;/div&gt;
  &lt;div id="container"&gt;
  
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  body{
      background-color:#666;
  }
  #container{
      width:auto;
  
  }
  
  #titleBar{
      position:fixed;
      position:relative;
      width:auto;
      height:15px;
      text-align:left;
      font-family:Verdana, Geneva, sans-serif;
      font-size:small;
      color:#00FFFF;
      background-color:#000;
      box-shadow:0 3px 5px #333333;
      border-bottom-left-radius:3px;
      border-bottom-right-radius:3px;
  }
  
  
  .bubble{
      width:auto;
      height: 40px;
      position:relative;
      border-spacing: 3px;
      background-color:#0FF;
      border-radius:3px;
      font-family:Impact, Verdana, Geneva, sans-serif;
      text-align:center;
  
  }
  </code></pre>
  
  <p>Thanks in advance!</p>