Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Responsive Layout

Posted by Holly Logan
Holly Logan
7,142 Points

Help with footer nav alignment

Hi, I'm can't seem to get my footer nav menu in line with my name in the tablet view. Can someone please let me know what I am doing wrong?

<!DOCTYPE html>
<html>
<head>
    <meta name=viewport content="width=device-width, initial-scale=1">
  <title>Holly Logan</title>
  <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div id="home">
  <header class="main-header">
      <h1 class="name"><a href="#">Holly Logan</a></h1>
      <ul class="main-nav">
        <li><a href="home">home</a></li>
        <li><a href="#portfolio">portfolio</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
    </header>
  </div>

  <div class="container clearfix">
    <img class="profile-image" src="img/responsive-layout-profile.png" alt="Photo of Holly Logan">
    <p class="intro">Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end development at Treehouse and am excited to put all my skills to use!</p>
</div>

    <div id="portfolio">
    <h1>portfolio</h1>

    <div class="first col">
    <img class="portfolio-image" src="img/portfolio-1.png" alt="Marketing Page">
    <h2>Marketing Page</h2>
    <p>This project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
    </div>

    <div class="second col">
    <img class="portfolio-image" src="img/portfolio-2.png" alt="Search Page">
    <h2>Search Page</h2>
    <p>This project searches through a specific database to find information that the user is trying to look up.</p>
    </div>

    <div class="first col">
    <img class="portfolio-image" src="img/portfolio-3.png" alt="Travel App">
    <h2>Travel App</h2>
    <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
    </div>

    <div class="second col">
    <img class="portfolio-image" src="img/portfolio-6.png" alt="Map of Favourite Spots">
    <h2>Favourite Spots</h2>
    <p>This project uses mapping apis to plot points for my favourite spots in the city for a do-it-yourself walking tour.</p>
    </div>

    <div class="first col">
    <img class="portfolio-image" src="img/portfolio-5.png" alt="Photo Gallery">
    <h2>Photo Gallery</h2>
    <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
    </div>

    <div class="second col">
    <img class="portfolio-image" src="img/portfolio-4.png" alt="Calculator">
    <h2>Calculator</h2>
    <p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
    </div>

  </div>


  <div id="contact">
  <footer class="main-footer clearfix">
    <h1>contact</h1>
    <p>If you're interested in chatting or want more information about what I've been working on, I'd love to hear from you!</p>
    <p>Phone &nbsp; <span class="bold">027 218 9631</span></p>
    <p>Email &nbsp; <span class="bold">hollylogan1@gmail.com</span></p>
    <hr>

    <p class="footer-left">Holly Logan</p>
    <p class="footer-right">back to top</p>
    <ul class="footer-nav">
        <li><a href="#home">home</a></li>
        <li><a href="#portfolio">portfolio</a></li>
        <li><a href="#contact">contact</a></li>
      </ul>
  </footer>
    </div>
</body>
</html>

/* ================================= 
  Base Element Styles
==================================== */

* {
  box-sizing: border-box;
}

body {
    line-height: 1.6;
    color: #3a3a3a;
  background-color: #d9d9d9;
}

h1 {
  color: #4a4a4a;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.15em;
}

h2 {
  text-align: center;
  font-weight: normal;
}

a { 
    text-decoration: none;
}

p {
  font-size: 1.25em;
  font-weight: lighter;
  text-align: center;
  padding-left: 2em;
  padding-right: 2em;
}

.main-footer p {
  padding-left: .5em;
  padding-right: .5em;
}




/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
  margin: 0;
}

.name a,
.main-nav a {
  display: block;
  text-align: center;
  color: #4a4a4a;
}

.main-nav a {
  text-transform: uppercase;
  font-weight: bold;
  color: #4a4a4a;
}

.main-nav li {
  background-color: #ffffff;
  margin-top: 10px;
  padding: 1em;

}



/* ---- Layout Containers ---- */

.main-header {
    margin: 0 auto;
  width: 80%;
  background: #fafafa;
  padding: 1em 0;
}

.container {
  width: 80%;
  margin: 0 auto;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 40px;
  background-color: #fafafa;
}

.main-nav {
  width: 90%;
  margin: 0 auto;
}

#portfolio {
  width: 80%;
  margin: 0 auto;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #ffffff;
}

.main-footer {
  width: 80%;
  margin: 0 auto;
  padding: 1em 1em 5em;
  text-align: center;
    background: #fafafa;
}

/* ---- Page Elements ---- */

.profile-image {
  display: block;
  margin: 0 auto;
  width: 70%;
  padding-top: 40px;
  padding-bottom: 20px;
}

.portfolio-image {
  display: block;
  margin: 60px auto 25px;
  width: 95%;
}


.bold {
  font-weight: bold;
}

.footer-left {
  float: left;
  width: 40%;
  font-weight: bolder;
  font-size: .9em;
  padding-top: 15px;
}

.footer-right {
  float: right;
  width: 50%;
  text-transform: uppercase;
  font-weight: bolder;
  font-size: .9em;
  padding-top: 15px;
}

.footer-nav {
  display: none;
}

/* ================================= 
  Media Queries
==================================== */


@media (min-width: 768px) {

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

  .main-nav li {
    background-color: #fafafa;
    display: inline-block;
    width: 30%;
    margin: 30px auto 0;
    padding: 0;
    text-align: center;
  }

 .profile-image {
    float: right;
    display: inline-block;
    width: 40%;
    padding-top: 20px;
    padding-bottom: 0;
  }

 .intro {
    float: left;
    display: inline-block;
    width: 60%;
    text-align: left;
  }

  .portfolio-image {
    margin-top: 30px;
  }

  .col {
    display: inline-block;
    width: 50%;
    margin-right: -4px;
    vertical-align: top;
  }

  .main-footer p {
    width: 60%;
    margin: 0 auto 20px;
  }

  .footer-left {

  text-align: left;
  }

  .footer-right {
      display: none;
    }

.footer-nav {
  display: inline-block;
  float: right;

}

.footer-nav a {
  text-transform: uppercase;
  font-weight: bold;
  color: #4a4a4a;

}

.footer-nav li {
    background-color: #fafafa;
    float: left;
    padding: 13px;
  vertical-align: top;
  }

}


@media (min-width: 1024px) {

  .main-nav {
    float: right;
    width: 50%;

  }

  .name,
    .main-nav li {
        display: inline-block;
    margin-top: 0;

    }

  .main-nav a {
    vertical-align: top;
  }

  .name {
    margin-left: 60px;
  }


  .col {
    display: inline-block;
    width: 33%;
    margin-right: -4px;
    vertical-align: top;
  }

}

Thanks in advance.

1 Answer

Ronav Saundh
Ronav Saundh
8,070 Points

Hi, Try, text-align: center; I think it is because of your float: right; that this problem is occuring. Ron