title: How to center align logo on WordPress?
body: <p>How can I center align the logo on this header? Also wanted to know how to enable background transparency for header background color and change the value for maximum size for the logo. Here is the CSS entry for the header section.</p>
  
  <pre><code> #header {
    display: block;
    position: relative;
    z-index: 600;
    /* Higher than the sidebar widget and widget container, sliders */
    margin: 0;
    padding: 0;
    width: 100%;
    background: #2F2E3C; }
    #header &gt; .inner {
      position: relative; }
      #header &gt; .inner &gt; .wrap {
        position: relative;
        min-height: 76px; }
    @media only screen and (max-width: 1024px) {
      #header &gt; .inner &gt; .warp {
        min-height: 80px; } }
    @media only screen and (max-width: 767px) {
      #header &gt; .inner {
        text-align: center; }
        #header &gt; .inner &gt; .wrap {
          min-height: 40px; } }
  
  #header.sticky {
    position: fixed;
    z-index: 999;
    width: 100%; }
    @media only screen and (max-width: 767px) {
      #header.sticky {
        position: static !important; } }
    #header.sticky .wrap {
      min-height: 0; }
    .boxed #header.sticky {
      max-width: 1180px;
      width: 96%; }
    .admin-bar #header.sticky {
      top: 32px; }
    #header.sticky #site-logo {
      top: 10px; }
    #header.sticky .dropdown-menu-wrap &gt; ul.menu &gt; li &gt; ul.sub-menu {
      top: 60px; }
    #header.sticky #primary-menu &gt; ul.menu &gt; li &gt; a {
      line-height: 60px; }
    #header.sticky #top-header-area {
      display: none; }
  
  #site-logo {
    position: relative;
    display: inline-block;
    float: left;
    left: 0;
    top: 30px;
    line-height: 0;
    margin: 0; }
    #site-logo a {
      font-size: 28px;
      color: #494D4E;
      line-height: 36px;
      direction: ltr;
      display: block;
      text-align: left;
      /* Do not let logo get bigger than the header */
      font-family: "Lato", Arial, Helvetica, Verdana, sans-serif; }
      @media only screen and (max-width: 767px) {
        #site-logo a {
          display: inline-block;
          text-align: center; } }
      #site-logo a img {
        max-height: 100%;
        max-width: 100%; }
    @media only screen and (max-width: 767px) {
      #site-logo {
        display: block;
        float: none;
        position: relative;
        margin: 0 auto;
        top: 0;
        padding: 10px 0; }
        #site-logo a img {
          max-width: 75%;
          margin: 0 auto; } }
  
  #site-description {
    margin: 0; }
  
  #container {
    background: #f7f7f7; 
  </code></pre>
  
  <p>Edit:</p>
  
  <pre><code>#header {
    display: block;
    position: relative;
    z-index: 600;
    /* Higher than the sidebar widget and widget container, sliders */
    margin: 0;
    padding: 0;
    width: 100%;
    background: #2F2E3C; }
    #header &gt; .inner {
      position: relative; }
      #header &gt; .inner &gt; .wrap {
        position: relative;
        min-height: 76px; }
    @media only screen and (max-width: 1024px) {
      #header &gt; .inner &gt; .warp {
        min-height: 80px; } }
    @media only screen and (max-width: 767px) {
      #header &gt; .inner {
        text-align: center; }
        #header &gt; .inner &gt; .wrap {
          min-height: 40px; } }
  
  #header.sticky {
    position: fixed;
    z-index: 999;
    width: 100%; }
    @media only screen and (max-width: 767px) {
      #header.sticky {
        position: static !important; } }
    #header.sticky .wrap {
      min-height: 0; }
    .boxed #header.sticky {
      max-width: 1180px;
      width: 96%; }
    .admin-bar #header.sticky {
      top: 32px; }
    #header.sticky #site-logo {
      top: 10px; }
    #header.sticky .dropdown-menu-wrap &gt; ul.menu &gt; li &gt; ul.sub-menu {
      top: 60px; }
    #header.sticky #primary-menu &gt; ul.menu &gt; li &gt; a {
      line-height: 60px; }
    #header.sticky #top-header-area {
      display: none; }
  
  #site-logo {
    position: relative;
    float: left;
    left: 0;
    top: 30px;
    line-height: 0;
    margin: 0; }
    #site-logo a {
      font-size: 28px;
      color: #494D4E;
      line-height: 36px;
      direction: ltr;
      display: block;
      text-align: left;
      /* Do not let logo get bigger than the header */
      font-family: "Lato", Arial, Helvetica, Verdana, sans-serif; }
      @media only screen and (max-width: 767px) {
        #site-logo a {
          display: inline-block;
          text-align: center; } }
      #site-logo a img {
        margin:auto;
        max-height: 100%;
        max-width: 100%; }
    @media only screen and (max-width: 767px) {
      #site-logo {
        display: block;
        float: none;
        position: relative;
        margin: 0 auto;
        top: 0;
        padding: 10px 0; }
        #site-logo a img {
          max-width: 75%;
          margin: 0 auto; } }
  
  #site-description {
    margin: 0; }
  
  #container {
    background: #f7f7f7; }
  </code></pre>