title: How to shrink the width size hyperlink?
body: <p>I'm pretty fresh to html/css programming, so please forgive me for if this is a rookie mistake.</p>
  
  <p>I've started a new webpage - <a href="http://robingham.co.uk/LUUCC4/index.php" rel="nofollow">http://robingham.co.uk/LUUCC4/index.php</a></p>
  
  <p>I've decided to attempt to get the fixed navigation and menu bar sorted out first.</p>
  
  <p>I want the menu button and the logo for the site to be within the fixed navigation bar. As you can see, i've pretty much sorted it out. There are a few minor things i need to do, like align the menu button. But functionality it seems to be working fine.</p>
  
  <p>The issue that i'm attempting to fix at the moment is that the logo has a screen width sized hyperlink area. I've added a hyperlink to the logo so that users can go back to the home page by clicking it. I also want the logo to be horizontally centre regardless of the size of the screen. I believe the issue has something to do with the fact that i had to use <code>display: block;</code> to get the horizontal centre alignment to work but i'm not sure how to fix the hyperlink.</p>
  
  <p>How do i fix it please?</p>
  
  <p>Thanks</p>
  
  <p>My index.php is.</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;link rel="icon" type="image/ico" href="http://www.robingham.co.uk/LUUCC3/media/favicon.ico"&gt;
      &lt;link type="text/css" rel="stylesheet" href="http://www.robingham.co.uk/LUUCC3/styles/general_formatting.css"/&gt;
      &lt;title&gt;LUUCC-Build&lt;/title&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;script src="http://www.robingham.co.uk/LUUCC3/scripts/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://www.robingham.co.uk/LUUCC3/scripts/menu_function.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
      &lt;div id="header_bar"&gt;
          &lt;img class="icon-menu" src="media/menu.png" width="40" height="40" alt="Menu button"/&gt;
          &lt;!--&lt;a href="http://www.robingham.co.uk"&gt;&lt;img id="header_bar_menu" src="media/menu.png" width="40" height="40" alt="Menu button"/&gt;&lt;/a&gt;--&gt;
          &lt;div&gt;&lt;a href="http://www.robingham.co.uk/LUUCC/index.php"&gt;&lt;img id="header_bar_logo" src="media/header_bar_logo.png" width="315" height="65" alt="LUUCC logo"/&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="menu"&gt;
        &lt;!-- Menu icon --&gt;
        &lt;div class="icon-close"&gt;
          &lt;img src="http://www.robingham.co.uk/LUUCC3/media/close.png"&gt;
        &lt;/div&gt;
  
        &lt;!-- Menu --&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
  
  
  
      &lt;/div id="body_material"&gt;
      &lt;p&gt;test1&lt;/p&gt;
      &lt;p&gt;test2&lt;/p&gt;
      &lt;p&gt;test3&lt;/p&gt;
      &lt;p&gt;test4&lt;/p&gt;
      &lt;p&gt;test5&lt;/p&gt;
      &lt;p&gt;test6&lt;/p&gt;
      &lt;p&gt;test7&lt;/p&gt;
      &lt;p&gt;test8&lt;/p&gt;
      &lt;p&gt;test9&lt;/p&gt;
      &lt;p&gt;test10&lt;/p&gt;
      &lt;p&gt;test221&lt;/p&gt; &lt;!--Removed some of these for the sake of the post--&gt;
      &lt;p&gt;test221&lt;/p&gt;
      &lt;p&gt;test221&lt;/p&gt;
      &lt;p&gt;test221&lt;/p&gt;
      &lt;p&gt;test221&lt;/p&gt;
      &lt;/div&gt;  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>My CSS code is.</p>
  
  <pre><code>body {
      background-color: #00FFF0; /*#f6f6f6*/
  }
  
  #header_bar {
      z-index: 1;
      position: fixed;
      width: 100%;
      top: -1px;
      left: -1px;
      height: 65px; /**/
      background-color: #FFFFFF; /*FFFFFF*/
      border:1px solid #ccc;
  }
  
  #header_bar_menu{
      display: inline-block;
      /*vertical-align: 9px;
      margin-left: 10px;*/
      border:4px solid #000000;
      margin-left: 15px;
      margin-top: 15px;
  }
  
  #header_bar_logo {
      /*display: inline-block;
      margin-left: 500px;*/
      /*display: inline-block;
      text-align:center;*/
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: -95px; /*-60*/
  }
  
  .menu {
    background: #202024; 
    left: -285px;  /* start off behind the scenes */
    top: 65px;
    height: 100%;
    position: fixed;
    width: 285px;
  }
  
  .menu ul {
    border-top: 1px solid #636366;
    list-style: none;
    margin: 0;
    padding: 0;
  }
   /**/
  .menu li {
    border-bottom: 1px solid #636366;
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
  }
  
  .menu a {
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
  }
  
  .icon-close {
    cursor: pointer;
    padding-left: 10px;
    padding-top: 10px;
  }
  
  .icon-menu {
    color: #fff;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-top: 25px;
    text-decoration: none;
    text-transform: uppercase;
  }
  
  .icon-menu i {
    margin-right: 5px;
  }
  </code></pre>