Some alignment corrections

_includes/footer.html

@@ -32,6 +32,15 @@
                 <li><a href="{{ site.baseurl }}/events/meetings_and_conferences">Meetings and conferences</a></li>
             </ul>
         </div>
+        <div>
+            <h3>
+              <a href="#">Privacy</a>
+            </h3>
+            <ul>
+                <li><a href="#">Cookies</a></li>
+                <li><a href="#">Terms of use</a></li>
+            </ul>
+        </div>
         <div>
             <a href="http://www.elixir-europe.org" title="ELIXIR Europe's web site">
                 <img src="https://elixir-europe.org/system/files/white-orange-logo.png" alt="Elixir logo" width="150px" class="site-footer-primary-logo" />
@@ -45,9 +54,6 @@
         <div id="copyright">
             <ul>
                 <li>{{- site.footer-copyright | escape -}} &nbsp;{{ 'now' | date: "%Y" }}</li>
-                <li><a href="#">Privacy</a></li>
-                <li><a href="#">Cookies</a></li>
-                <li><a href="#">Terms of use</a></li>
             </ul>
         </div>
 

_sass/elixir/_layout.scss

@@ -84,10 +84,10 @@
     }
 
     ul {
-      transition: height 0.25s;
       margin-left: 0;
       position: relative;
       top: 66px;
+      left: -16px;
 
       li {
         list-style: none;
@@ -230,7 +230,7 @@
     font-size: 0.875rem;
 
     @media only screen and (min-width: 600px) {
-      padding-left: 13%;
+      padding-left: 21%;
     }
 
     @media only screen and (max-width: 600px) {
@@ -308,7 +308,7 @@
     flex-wrap: wrap-reverse;
 
     @media only screen and (min-width: 600px) {
-      padding-left: 13%;
+      padding-left: 21%;
     }
 
     @media only screen and (max-width: 600px) {