title: Div margin won't go away
body: <p>I have been trying to get text to appear to the right of my styled list. I began by setting a fixed width for my ul and div but then the margin remained. I set the margins for both ul and div to 0px and that did not seem to affect the div's margins. (I went through it with chrome's inspect element). If there is another way to get the text up and to the right of my list without messing anything else up I would appreciate that, but I would like to know what is going on with my margins aswell.</p>
  
  <pre><code>&lt;div class="bar"&gt;           
          &lt;div class="nav"&gt;                
              &lt;h1&gt;&lt;a href="#" id="JETS"&gt;Lorem Ipsum&lt;br&gt;Lorem Ipsum&lt;/a&gt;&lt;/h1&gt;
              &lt;ul class="nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="#" id="ML1"&gt;Lorem&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" id="ML2"&gt;Lorem&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" id="ML3"&gt;Lorem&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" id="ML4"&gt;Lorem&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#" id="ML5"&gt;Lorem&lt;/a&gt;&lt;/li&gt;       
             &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="Lmenu"&gt;
          &lt;ul class="Lmenu"&gt;
              &lt;ul id="Lmenu1"&gt;
                  &lt;li&gt;&lt;a href="#" class="majorL"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;                
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;     
                  &lt;br&gt;  
              &lt;/ul&gt;         
              &lt;ul id="Lmenu2"&gt;
                  &lt;li&gt;&lt;a href="#" class="majorL"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;                
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt; 
                  &lt;br&gt;
              &lt;/ul&gt;              
              &lt;ul  id="Lmenu3"&gt;
                  &lt;li&gt;&lt;a href="#" class="majorL"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;                
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;br&gt;
              &lt;/ul&gt;              
              &lt;ul id="Lmenu4"&gt;
                  &lt;li&gt;&lt;a href="#" class="majorL"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;                
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Lorem Ipsum&lt;/a&gt;&lt;/li&gt; 
                  &lt;br&gt;
              &lt;/ul&gt;
          &lt;/ul&gt;
      &lt;/div&gt;  
  
      &lt;h2&gt;this is supposed to be up on the right
      &lt;/h2&gt;
  
      &lt;div id="foot"&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This is my css(ignore the untidiness)</p>
  
  <pre><code>h1 {
  font-size:16pt;
  font-family:sans-serif;
  margin-left:10px;
  display:inline-block;
  width:280px;
  text-align:center;
  float:left;}
  
  a#JETS {
  text-decoration:none;
  color:#000000;
  display:block}
  
  body {
  margin:0;}
  
  div#foot {
  position: relative;
  bottom: 0px;
  left: 0px;
  width:100%;
  background-color:#d0d0d0;
  height:100px;}
  
   /*****************************************************************
                      navigation bar
   *****************************************************************/
   div.bar {
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%;
  background-color:#d0d0d0;
  height:79px;}
  div.nav {
  width:1080px;
  margin-left:auto;
  margin-right:auto;
  }
  ul.nav {
  list-style-type:none;
  display:inline;
  text-align:center;
  margin-top:0px;
  margin-left:auto;
  margin-right:auto;
  padding:0px;
  font-family:sans-serif
  }
  /************Links**************/
  .active #ML1 {
  text-shadow:0px 0px 15px #000;
  color:#000;
  }
  ul.nav a:link, ul.nav a:visited {
  display:inline-block;
  font-size:14pt;
  text-align:center;
  text-decoration:none;
  color:#000000;
  padding:28px;
  background-color:#d0d0d0;
  width:100px;
  float:left;
  }
  ul.nav a:hover, ul.nav a:active {
  background-color:#d0d0d0;
  box-shadow:inset 0px 0px 30px 0px rgba(0, 0, 0, 0.3)
  }
  /*******************************/
  
  /****************************************************************/
  
  /*****************************************************************
                      Left Menus
  *****************************************************************/
  div.Lmenu {
  width:162px;
  margin:0;
  }
  ul.Lmenu, ul.Lmenu ul {
  margin-bottom:0px;
  padding:0px;
  list-style-type:none;
  text-decoration:none;
  }
  ul.Lmenu {
  margin-top:79px;
  width:162px;
  }
  /************Links**************/
  ul.Lmenu ul a:hover, ul.Lmenu ul a:active {
  color:#000;
  }
  /*to style all the links on the left*/
  ul.Lmenu a:link, ul.Lmenu a:visited {
  font-family:sans-serif;
  display:inline-block;
  font-size:12pt;
  text-align:center;
  text-decoration:none;
  color:#747474;
  padding:8px 2px;
  width:150px;
   }
  /*to make the major links on the left larger and black*/
  ul.Lmenu a:link.majorL, ul.Lmenu a:visited.majorL {
  font-size:14pt;
  color:#000000;
  padding:5px 2px;
  }
  /*to make the links on the left glow when hovered or clicked*/
  ul.Lmenu a:hover, ul.Lmenu a:active {
  box-shadow:inset 0px 0px 60px 0px #ccc
  }
  /*******************************/
  
  /*********Lines on left**********/
  
  /*to highlight the bars on the left when hovering over the ul*/
  ul#Lmenu1 {
  border-left:8px solid #ddd;
  width:154px;
  }
  ul#Lmenu1:hover {
  border-left:8px solid #eee;
  width:154px;
  }
  ul#Lmenu2 {
  border-left:8px solid #ddd;
  width:154px;
  }
  ul#Lmenu2:hover {
  border-left:8px solid #eee;
  width:154px;
  }
  ul#Lmenu3 {
  border-left:8px solid #ddd;
  width:154px;
  }
  ul#Lmenu3:hover {
  border-left:8px solid #eee;
  width:154px;
   }
  ul#Lmenu4 {
  border-left:8px solid #ddd;
  width:154px;
  }
  ul#Lmenu4:hover {
  border-left:8px solid #eee;
  width:154px;
  }
  /*******************************/
  
  /****************************************************************/
  </code></pre>
  
  <p>I tried floating like some suggested but that messed up another part of my site that i didn't show at first</p>
  
  <p><a href="http://jsfiddle.net/j8ryJ/3/embedded/result/" rel="nofollow">problem</a></p>
  
  <p><a href="http://jsfiddle.net/j8ryJ/2/embedded/result/" rel="nofollow">floated ul.Lmenu to the left</a></p>
  
  <p>I need an answer that does not mess up the rest of it</p>
  
  <p>Let me know if you need anymore info</p>