title: Social media buttons 'invisible' on pages using default template?
body: <p>hello im new to css and html so sorry if this is SUPER basic but i've tried some stuff from the tinkernet and can't find something that will work (its probably a simple solution and ive over complicated it)</p>
  
  <p>basically, i want my nav bar and social media buttons at the top and bottom of the page (Resp) to be showing on the 'about' and 'cv' pages, which both use the default layout. They look like they are using the css but the only thing that isnt working the the social media buttons. they are 'there' as clickable links, but just not visible.. any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    .xx-socialmedia-buttons .fa {
          font-size: 2.25rem;
          align-content: center;
          align-items: center;
          justify-content: center;
          text-align: center;
          text-decoration: none;
          border-radius: 50%;
          padding: 0px 15px;
          font-weight: 400;
          color: #fff;
      }
      
      .fa-facebook {
          width: 11px;
          height: 13px;
      }
      
      .fa:hover {
          opacity: 0.3;
      }
      
      nav ul, footer ul {
          font-family:'Helvetica', 'Arial', 'Sans-Serif';
          padding: 0px;
          list-style: none;
          font-weight: bold;
      }
      
      nav ul li, footer ul li {
          display: inline;
          margin-right: 0px;
      }
          *FOOTER*/
          .xx-main-footer {
              background-color: rgb(161, 216, 238);
              align-content: center;
              align-items: center;
              text-align: center;
              justify-content: center;
              margin: 0 auto;
          }
          
          .xx-main-footer ul {
              margin: 0px auto;
              padding: 1rem 1rem 1rem 1rem;
          }
          
          .xx-main-footer .xx-socialmedia-buttons .fa {
              color: rgb(79, 41, 88);
              padding: 0px 30px;
          }
          
          .xx-main-footer .xx-socialmedia-buttons a { 
              opacity: 0.6;
              color: rgb(79, 41, 88);
              cursor: pointer;
              text-decoration: none;
              justify-self: center;
              padding: 0px 30px;
          }
          
          .xx-main-footer .xx-socialmedia-buttons .fa:hover,
          .xx-main-footer .xx-socialmedia-buttons a:hover {
              opacity: 0.3;
          } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;footer class="xx-main-footer"&gt;
       &lt;div class="xx-socialmedia-buttons"&gt;
        &lt;ul&gt;
         &lt;li&gt;&lt;a href="xxx"&gt;email me&lt;/a&gt;&lt;/li&gt;
         &lt;!-- &lt;li&gt;&lt;a href="xxx"&gt;github.com/xx&lt;/a&gt;&lt;/li&gt; --&gt;
         &lt;li&gt;&lt;a href="xxx" target="_blank" class="fa fa-github"&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-linkedin"&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="xxx"rel="noopener noreferrer" target="_blank" class="fa fa-facebook"&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="https://www.instagram.com/xxx"rel="noopener noreferrer" target="_blank" class="fa fa-instagram"&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-youtube"&gt;&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="https://xxx"rel="noopener noreferrer" target="_blank" class="fa fa-pinterest"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
      &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I replaced my naming conventions and links with x's so I hope that doesn't confuse things...</p>
  
  <p>I'm just wondering, is there a special way to get this to appear on every page because I don't think I am doing it correctly... </p>