title: Moving CSS Header Logo Closer to Edge of Layout
body: <p>I'm helping a friend fix a few small things on his website and I have a few questions about a CSS issue I'm having. Now before everyone tells me to read a CSS book before I try to move this logo closer to the edge of the screen - understand I'm an Android/Java developer (primarily) and I'm pretty sure I can handle this simple task. </p>
  
  <p>It's just acting a bit funny and I need a quick hand... </p>
  
  <p>I have our header logo: <code>img src="img/logo.png</code></p>
  
  <p>which is appearing a bit too far from the left edge. </p>
  
  <p>I've taken a look at the image it's self and it's cropped appropriately. </p>
  
  <p>How might we move this logo a bit to the left? (Every time I attempt to change the #header-inner value the entire header collapses for some strange reason.) </p>
  
  <h2>Screenshot:</h2>
  
  <p><img src="https://i.stack.imgur.com/d9PSD.png" alt="enter image description here"></p>
  
  <h2>CSS Source:</h2>
  
  <pre><code>/*====HEADER
  =======================================================*/
  
  #header {   
      border-top: 1px solid #525252;
      border-bottom: 1px solid #525252;
      -webkit-box-shadow: 0 5px 0 #1e1e1e;
      -moz-box-shadow: 0 5px 0 #1e1e1e;
      box-shadow: 0 5px 0 #1e1e1e; 
      margin-bottom: 42px;
  }
  
  #header-inner {
      width: 930px;
      margin: 0 auto;
      background: url(../img/back-light-1.png) no-repeat left center;
      padding: 20px 0;    
  }
  
  #title {
      float: left;
  }
  
  #logo h1 {
      font-family: Bebas, Arial, sans-serif;  
      color: #f7f7f7;
      padding-top: 10px;
      margin-bottom: 3px;
      font-size: 30px;
      text-shadow: 1px 1px 1px #262626;
      letter-spacing: 1px;
      font-weight: normal;
  }
  
  #logo h1 a {
      color: #f7f7f7;
      text-decoration: none;
  }
  
  #logo h1 a:hover {
      text-decoration: none;
  }
  
  #logo p {   
      font-size: 10px;
      text-transform: uppercase;
      margin-bottom: 0;
      color: #f7f7f7;
  }
  
  #logo img {
      float: left;
      margin-right: 10px;
  }
  
  /*====NAVIGATION
  =======================================================*/
  
  #navigation {
      float: right;
      margin-top: 2px;
      position: relative;
      z-index: 1200;
  }
  
  #navigation li {
      display: block; 
      float: left;    
      position: relative;
      margin-left: 10px;  
      border-top-right-radius: 8px;
      border-bottom-left-radius: 8px;
      -webkit-transition: background-color .2s linear;
      -moz-transition: background-color .2s linear;
      -o-transition: background-color .2s linear;
      -ms-transition: background-color .2s linear;
      transition: background-color .2s linear;
  }
  
  #navigation li:hover {
      background-color: #121212;
      text-shadow: none;
  }
  
  #navigation li a {
      font-family: Bebas, Arial, sans-serif;  
      font-size: 18px;
      color: #f7f7f7;
      text-decoration: none;
      padding: 10px;
      display: inline-block;  
      margin-bottom: 0px;         
  }
  
  #navigation li a span {
      font-family: Arial, sans-serif; 
      text-transform: uppercase;
      font-size: 9px;
      display: block;
      line-height: 14px;
  }
  
  #navigation li .active-nav, #navigation li .active-nav:hover {
      background-color: #8eaf2a;
      text-shadow: 1px 1px 0px #333;
      border-top-right-radius: 8px;
      border-bottom-left-radius: 8px; 
  }
  
  #navigation li.dropdown {
      border-bottom-left-radius: 0;
  }
  
  #navigation li.dropdown .active-nav {
      border-bottom-left-radius: 0;
  }
  </code></pre>
  
  <h2>HTML Source:</h2>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;title&gt;Company Name - NY&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
  &lt;!--imports the main css file--&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/style.css" /&gt;
  &lt;!--imports prettyPhoto css file--&gt;
  &lt;link rel="stylesheet" type="text/css" media="screen" href="css/prettyPhoto.css" /&gt;
  
  &lt;!--imports jquery--&gt;
  &lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;!--imports twitter feed plugin--&gt;
  &lt;script type="text/javascript" src="js/jquery.tweet.js"&gt;&lt;/script&gt;
  &lt;!--imports easing plugin--&gt;
  &lt;script type="text/javascript" src="js/easing.js"&gt;&lt;/script&gt;
  &lt;!--imports prettyPhoto plugin--&gt;
  &lt;script type="text/javascript" src="js/jquery.prettyPhoto.js"&gt;&lt;/script&gt;
  &lt;!--imports jQuery Tools plugin--&gt;
  &lt;script type="text/javascript" src="js/jquery.tools.min.js"&gt;&lt;/script&gt;
  &lt;!--imports jQuery superfish plugin--&gt;
  &lt;script type="text/javascript" src="js/superfish.js"&gt;&lt;/script&gt;
  &lt;!--imports jQuery jflickrfeed plugin--&gt;
  &lt;script type="text/javascript" src="js/jflickrfeed.min.js"&gt;&lt;/script&gt;
  &lt;!--imports jQuery AsyncSlider plugin--&gt;
  &lt;script type="text/javascript" src="js/jquery.asyncslider.min.js"&gt;&lt;/script&gt;
  
  &lt;!--imports custom javascript code--&gt;
  &lt;script type="text/javascript" src="js/custom.js"&gt;&lt;/script&gt;
  
  &lt;script language="javascript" type="text/javascript"&gt;
  
  $(document).ready(function() {  
      // Setup Slider
      $("#async-slider").asyncSlider({
          keyboardNavigate: true,
          easing: 'easeInOutExpo',
          minTime: 600,
          maxTime: 1500,
          autoswitch: 4800,
          centerPrevNextNav: false,
          slidesNav: false
      });
  });
  &lt;/script&gt;
  &lt;!--[if IE 7]&gt;&lt;link href="css/ie7.css" rel="stylesheet" type="text/css" media="screen" /&gt;
  &lt;![endif]--&gt;
  &lt;!--[if IE 8]&gt;&lt;link href="css/ie8.css" rel="stylesheet" type="text/css" media="screen" /&gt;
  &lt;![endif]--&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;      
      &lt;div id="header" class="pattern-1"&gt;
          &lt;div id="header-inner"&gt;
              &lt;div id="logo"&gt;
                  &lt;img src="img/logo.png" alt="image description"/&gt;   
                  &lt;div id="title"&gt;
                      &lt;h1&gt;&lt;a href="index.asp"&gt;Company Name - NY&lt;/a&gt;&lt;/h1&gt;
                      &lt;p&gt;&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- end title --&gt;
              &lt;/div&gt;&lt;!-- end logo --&gt;
  
              &lt;ul id="navigation"&gt;
                  &lt;li&gt;
                      &lt;a class="active-nav" href="index.asp"&gt;Home
  
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="about.asp"&gt;About Us
  
                      &lt;/a&gt;
                  &lt;/li&gt;               &lt;li&gt;
                      &lt;a href="#"&gt;Energy Partnership Program
  
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#"&gt;Products
  
                      &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li&gt;
                      &lt;a href="#"&gt;Contact Us
  
                      &lt;/a&gt;&lt;/li&gt;
  
  
  
  
                                  &lt;li&gt;
                      &lt;a href="#"&gt;Affiliates
  
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;&lt;!-- end navigation --&gt;
  
              &lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- end clearfix --&gt;
          &lt;/div&gt;&lt;!-- end header-inner --&gt;
      &lt;/div&gt;&lt;!-- end header --&gt;
  
  &lt;!-- BEGIN ASYNC SLIDER --&gt;
  
      &lt;div id="content-slider"&gt;       
          &lt;ul id="async-slider"&gt;
              &lt;li class="slide"&gt;
                  &lt;div class="three-fifth fl-left" style="width: 425px; height: 242px"&gt;
                      &lt;h2&gt;Company Name - NY&lt;/h2&gt;
                      &lt;h3&gt;&lt;i&gt;"A not just for profit company!"&lt;/i&gt;&lt;/h3&gt;
                      &lt;p&gt;...&lt;/a&gt;
                  &lt;/div&gt;  
  
                  &lt;img class="fl-right" src="img/sliders/async/1.png" alt="image" width="468" height="329" /&gt;      
  
              &lt;/li&gt;
  
              &lt;li class="slide"&gt;
                  &lt;div class="three-fifth fl-left"&gt;
                      &lt;h2&gt;Energy Efficient Lighting Products to fit your needs&lt;/h2&gt;
                      &lt;h3&gt;&lt;i&gt;T8, T12, E27, Outdoor Lighting, etc&lt;/i&gt;&lt;/h3&gt;
                      &lt;p&gt;...&lt;/a&gt;
                  &lt;/div&gt;  
  
                  &lt;img class="fl-right" src="img/sliders/async/2Transparent.png" alt="image" width="347" height="305" /&gt; 
  
              &lt;/li&gt;
  
              &lt;li class="slide"&gt;
                  &lt;div class="three-fifth fl-left"&gt;
                      &lt;h2&gt;Tax Credits and Grants available for those who qualify&lt;/h2&gt;
                      &lt;h3&gt;&lt;i&gt;Federal, State and Local tax incentives available&lt;/i&gt;&lt;/h3&gt;
                      &lt;p&gt;...&lt;/a&gt;
                  &lt;/div&gt;  
  
                  &lt;img class="fl-right" src="img/sliders/async/3.gif" alt="image" /&gt;   
  
              &lt;/li&gt;
  
              &lt;li class="slide"&gt;          
  
                  &lt;img class="fl-left" src="img/sliders/async/4Transparent.png" alt="image" width="347" height="305" /&gt;
  
                  &lt;div class="three-fifth last fl-right"&gt;
                      &lt;h2&gt;Create a Comprehensive Energy Profile&lt;/h2&gt;
                      &lt;h3&gt;&lt;i&gt;Calculate your Energy Savings in Real Time!&lt;/i&gt;&lt;/h3&gt;
                      &lt;p&gt;...&lt;/a&gt;
                  &lt;/div&gt;  
  
              &lt;/li&gt;
  
          &lt;/ul&gt;   
          &lt;div class="clear"&gt;&lt;/div&gt;&lt;!-- end clearfix --&gt;          
      &lt;/div&gt;&lt;!-- end content-slider --&gt;       
  
  &lt;!-- END ASYNC SLIDER --&gt;
  
      &lt;div class="container pattern-1"&gt;
          &lt;div class="tagline"&gt;
              &lt;div class="tagline-text"&gt;
                  &lt;h2&gt;Welcome to Company Name - NY&lt;/span&gt;  &lt;/h2&gt;
                  &lt;p&gt;&lt;i&gt;"A not just for profit Company!"&lt;/i&gt;&lt;/p&gt;
              &lt;/div&gt;&lt;!-- end tagline-text --&gt;
  
              &lt;div class="tagline-btn"&gt;
                  &lt;a href="#"&gt;&lt;span class="main"&gt;"Calculate your Energy Savings NOW!"&lt;/span&gt;&lt;span class="arrow-btn"&gt;&lt;/span&gt;&lt;/a&gt;
              &lt;/div&gt;&lt;!-- end tagline-btn --&gt;
              &lt;div class="clear"&gt;&lt;/div&gt;
          &lt;/div&gt;&lt;!-- end tagline --&gt;  
      &lt;/div&gt;&lt;!-- end container --&gt;
  
      &lt;div id="wrapper"&gt;  
  
          &lt;div class="one-half"&gt;
              &lt;div class="box-title"&gt;
                  &lt;h3&gt;EP Program&lt;/h3&gt;
                  &lt;span class="box-subtitle"&gt;Energy Partnership&lt;/span&gt;
              &lt;/div&gt;&lt;!-- end box-title --&gt;    
              &lt;p&gt;Today, with the emphasis on greener energy, products and way of 
  
  Life….....The economic climate has businesses looking for any type of
  
  Edge they can utilize to maximize the earnings potential of every dollar
  
  Earned. This requires a proactive, well concieved, structured and
  
  Customized new approach to rectify some of the same issues that have 
  
  Plagued all companies regardless of size or industry.
  
  How would you like to be able to cut spending?? Lower monthly 
  
  Expenses?? Increase productivity (thus creating growth in revenue and
  
  Potential earnings)?? While not sacrificing employees or the level of
  
  Quality of the products or services offered.Even generate
  
  Revenue from an expense, while improving your workplace environment.
  
  Our epp or energy partnership program takes all fctors of your day-
  To-day operations into considertaton when we examine your current 
  
  Energy consumption patterns. ....We analyze the data collected, then 
  
  Focus on your specific (customized) needs. At this point we strategize 
  
  Multiple options that can all be used to save you 40-75% on your very 
  
  Next electric bill.
  
  We offer several different ways within the “ep program” to help 
  
  Implement your customized plan designed for you to attain these lofty
  
  Goals.&lt;/p&gt;
              &lt;a class="button" href="about.asp"&gt;Continue reading&lt;/a&gt;
          &lt;/div&gt;&lt;!-- end one-half --&gt;
  
          &lt;div class="one-half last services"&gt;
              &lt;div class="box-title"&gt;
                  &lt;h3&gt;Services&lt;/h3&gt;
                  &lt;span class="box-subtitle"&gt;Company Name - NY&lt;/span&gt;
              &lt;/div&gt;&lt;!-- end box-title --&gt;    
              &lt;div class="one-fourth"&gt;
                  &lt;div class="box-title"&gt;
                      &lt;h4&gt;Energy Resources:&lt;/h4&gt;
                      &lt;img src="img/icons/spanner.png" alt="image" /&gt;                     
                  &lt;/div&gt;&lt;!-- end box-title --&gt;    
                  &lt;p&gt;Information and resources about energy and energy savings.&lt;/p&gt;
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;
  
              &lt;div class="one-fourth last"&gt;
                  &lt;div class="box-title"&gt;
                      &lt;h4&gt;Educational Resources:&lt;/h4&gt;
                      &lt;img src="img/icons/pencil.png" alt="image" /&gt;                      
                  &lt;/div&gt;&lt;!-- end box-title --&gt;    
                  &lt;p&gt;Your one-stop source for energy efficiency knowledge.&lt;/p&gt;
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;       
  
              &lt;div class="one-fourth"&gt;
                  &lt;div class="box-title"&gt;
                      &lt;h4&gt;Create Your Energy Profile:&lt;/h4&gt;
                      &lt;img src="img/icons/gear.png" alt="image" /&gt;                        
                  &lt;/div&gt;&lt;!-- end box-title --&gt;    
                  &lt;p&gt;Create and Analyze your comprehensive energy profile for FREE!&lt;/p&gt;
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;
  
              &lt;div class="one-fourth last"&gt;
                  &lt;div class="box-title"&gt;
                      &lt;h4&gt;Tax Counseling:&lt;/h4&gt;
                      &lt;img src="img/icons/phone.png" alt="image" /&gt;                       
                  &lt;/div&gt;&lt;!-- end box-title --&gt;    
                  &lt;p&gt;Find out what Federal, State and Local tax breaks you may qualify for.&lt;/p&gt;
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;       
  
          &lt;/div&gt;&lt;!-- end one-half --&gt;     
  
          &lt;div class="clear"&gt;&lt;/div&gt;
  
          &lt;div class="separator"&gt;&lt;/div&gt;       
  
          &lt;div class="title-col"&gt;
              &lt;h2&gt;Our Latest Projects&lt;/h2&gt;
              &lt;p&gt;"Coming Soon"&lt;/p&gt;
              &lt;a class="button" href="#"&gt;View Portfolio &lt;/a&gt;
          &lt;/div&gt;&lt;!-- end main-col --&gt;
  
          &lt;div class="gallery-thumbs-caption"&gt;
              &lt;div class="one-fourth"&gt;
                  &lt;div class="gallery-overlay"&gt;   
                      &lt;a class="zoom" href="img/portfolio/large/001.jpg" rel="prettyPhoto"&gt;
                          &lt;img class="box-img" src="img/box-img-1.jpg" alt="description" width="200" height="122" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="img-caption"&gt;
                      &lt;h4&gt;Project Title One&lt;/h4&gt;                  
                      &lt;p&gt;Fusce scelerisque pellentue mi. Suspen disse elementellus lorem ipsum.&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- end img-caption --&gt;
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;
  
              &lt;div class="one-fourth"&gt;
                  &lt;div class="gallery-overlay"&gt;   
                      &lt;a class="play" href="http://vimeo.com/7449107" rel="prettyPhoto"&gt;
                          &lt;img class="box-img" src="img/box-img-2.jpg" alt="description" width="200" height="122" /&gt;
                      &lt;/a&gt;                    
                  &lt;/div&gt;                          
  
                  &lt;div class="img-caption"&gt;
                      &lt;h4&gt;Project Title Two&lt;/h4&gt;                  
                      &lt;p&gt;Fusce scelerisque pellentue mi. Suspen disse elementellus lorem ipsum.&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- end img-caption --&gt;
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;
  
              &lt;div class="one-fourth last"&gt;
                  &lt;div class="gallery-overlay"&gt;   
                      &lt;a class="link" href="http://www.themeforest.net?iframe=true&amp;width=70%&amp;height=60%" title="themeforest.net" rel="prettyPhoto"&gt;
                          &lt;img class="box-img" src="img/box-img-3.jpg" alt="description" width="200" height="122" /&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="img-caption"&gt;
                      &lt;h4&gt;Project Title Three&lt;/h4&gt;                    
                      &lt;p&gt;Fusce scelerisque pellentue mi. Suspen disse elementellus lorem ipsum.&lt;/p&gt;
                  &lt;/div&gt;&lt;!-- end img-caption --&gt;
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;
  
              &lt;div class="clear"&gt;&lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- end gallery-thumbs-caption --&gt;   
  
          &lt;div class="separator"&gt;&lt;/div&gt;   
  
          &lt;div class="title-col"&gt;
              &lt;h2&gt;Latest News&lt;/h2&gt;
              &lt;p&gt;"Coming Soon"&lt;/p&gt;
              &lt;a class="button" href="#"&gt;Continue Reading &lt;/a&gt;
          &lt;/div&gt;&lt;!-- end main-col --&gt;
  
          &lt;div class="news"&gt;
              &lt;div class="one-fourth"&gt;                
                  &lt;h4&gt;Comunion And Two Oracles&lt;/h4&gt;
                  &lt;span class="news-meta"&gt;by John Doe on Mar 22, 2012&lt;/span&gt;  
  
                  &lt;p&gt;Praesent lobortis, turpis sit amet dignissim sagittis. Fusce scelerisque pellentesque mi... &lt;a href="#"&gt;read more&lt;/a&gt;&lt;/p&gt;    
  
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;
  
              &lt;div class="one-fourth"&gt;
                  &lt;h4&gt;Orion The Hunter&lt;/h4&gt;
                  &lt;span class="news-meta"&gt;by John Doe on Mar 22, 2012&lt;/span&gt;  
  
                  &lt;p&gt;Praesent lobortis, turpis sit amet dignissim sagittis. Fusce scelerisque pellentesque mi... &lt;a href="#"&gt;read more&lt;/a&gt;&lt;/p&gt;    
  
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;
  
              &lt;div class="one-fourth last"&gt;
                  &lt;h4&gt;Through The Looking Glass&lt;/h4&gt;
                  &lt;span class="news-meta"&gt;by John Doe on Mar 22, 2012&lt;/span&gt;  
  
                  &lt;p&gt;Praesent lobortis, turpis sit amet dignissim sagittis. Fusce scelerisque pellentesque mi... &lt;a href="#"&gt;read more&lt;/a&gt;&lt;/p&gt;    
  
              &lt;/div&gt;&lt;!-- end one-fourth --&gt;
  
              &lt;div class="clear"&gt;&lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- end news --&gt;     
  
      &lt;/div&gt;&lt;!-- end wrapper --&gt;
  
  
  &lt;!--#include file="footer.asp" --&gt;
  </code></pre>