title: How do I make the second square with no spaces at the top of the page?
body: <p>My first square is made with div tags and the second one is with ID which I named        #blacksquare2. The second square which is #blacksquare2 seems to always keep aligning at the bottom with my first square and can't bring it up to the page.Also the words 'i'm lovin' it' seem to be separate from each other. If it helps, I'm trying to achieve something like the McDonald's Website, just for practice.</p>
  
  <pre><code>CSS:
   div{
  height:90px;
  width:96px;
  background-color:#CC0000;
  border-radius:4px;
  text-align:center;
  margin-left:132px;
  }
  #blacksquare2{
  height:25px;
  width:200px;
  background-color:#000000;
  text-align:left;
  margin:1px 10px 10px 10px
  }   
  #blacksquare2 a{
  color:#E6E600;
  font-size:11px;
  font-family:Arial;
  margin:25px
  }
  span{ 
  font-size:50px; 
  text-decoration:none;
  font-family:Arial;
  color:#E6E600;
  font-weight:Arial;
  margin-left:10px;
  }
  a{
  text-decoration:none;
  font-size:13px;
  margin-right:10px;
  color:white;
  font-family:Arial bold;
  }
  l{
  font-size:8px
  }
  body{
  margin-top:0px
  }
  
  
  HTML:
  
  &lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;title&gt;Home :: McDonalds.com&lt;/title&gt;
      &lt;link rel="stylesheet"; type="text/css"; href="McDonald'sPrac.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div&gt;
      &lt;a href="http://www.mcdonalds.com/us/en/home.html"&gt;&lt;span&gt;M&lt;/span&gt;i'm lovin'     it&lt;l&gt;™&lt;/l&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="blacksquare2"&gt;
      &lt;a href="http://www.mcdonalds.com/us/en/home.html#"&gt;Home&lt;a&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  
  
  
  &lt;/html&gt;
  </code></pre>