title: Broken Div - Too much margin/padding etc
body: <p><a href="https://i.stack.imgur.com/Sp23W.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Sp23W.png" alt="enter image description here"></a></p>
  
  <p>I'm currently following a UDemy course where the instructor is teaching us Full Stack Development from scratch. Problem is, he made a lot of mistakes that I needed to improvise on like adding <code>&lt;span&gt;</code> next to sign in, instead of his idea of a <code>&lt;p&gt;</code> and my screenshots of the BBC Logo and Sign In button needed it's height modified in order for them to fit properly in that small nav bar.</p>
  
  <p>Here is the code: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Wadson's BBC&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;   
  &lt;/head&gt;
  
  &lt;style type="text/css"&gt;
  
      body {
          margin: 0px;
          padding: 0px;
          font-family: Helvetica, Arial, sans-serif;
      }
  
      #topbar {
          background-color: #7A0000;
          width: 100%;
          height: 45px;
          color: #fff;
      }
  
      .fixedwidth {
          width: 1050px;
          margin: 0 auto;
  
      }
  
      #logodiv {
          padding-top: 15px;
          float: left;
          border-right: 1px solid #990000;
          padding-right: 10px;
      }
  
      #signindiv {
          font-weight: bold;
          font-size: 0.9em;
          border-right: 1px solid #990000;
          position: relative;
          width: 200px;
          height: 45px;
          float: left;
      }
  
      #signindiv img {
          position: relative;
          top: 15px;
          left: 15px; 
      }
  
      #signintext {
          position: relative;
          top: 10px;
          left: 25px;
      }
  
      #topmenudiv {
          float: left;
      }
  
      #topmenudiv ul {
          margin: 0px;
          padding: 0px;
  
      }
  
      #topmenudiv li {
          list-style: none;
          font-weight: bold;
          font-size: 0.9em;
          border-right: 1px solid #990000;
          padding: 15px 20px 0px 20px
  
      }
  
  
  &lt;/style&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
              &lt;div id="topbar"&gt;
                  &lt;div class="fixedwidth"&gt;
                      &lt;div id="logodiv"&gt;
                          &lt;img src="images/logo.png" height="25px" /&gt;
                      &lt;/div&gt;
                      &lt;div id="signindiv"&gt;
                          &lt;img class="signinhead" src="images/signin.png" height="20px"/&gt;&lt;span id="signintext"&gt;Sign In&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div id="topmenudiv"&gt;
                          &lt;ul&gt;
                              &lt;li&gt;News&lt;/li&gt;
                              &lt;li&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;      
      &lt;/div&gt; &lt;!-- /#container --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any suggestions for an aspiring programmer? How can I think much differently so that I can spot errors while his is talking instead of copying his stuff verbatim? I understand HTML very well, I'm getting stuck on position, margin and padding.</p>