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

A A
seal-mask
.a{fill-rule:evenodd;}techdegree
A A
Full Stack JavaScript Techdegree Student 19,812 Points
Posted by A A
.a{fill-rule:evenodd;}techdegree
A A
Full Stack JavaScript Techdegree Student 19,812 Points

Responsive Layout Project #2 - Help with Flexbox on header and footer nav

Can someone please review my code and tell me why my nav elements aren't moving right along the right side of the page? I'm having a really hard time with flexbox. Thank you.

<!DOCTYPE html> <html lang='en'> <head> <meta charset="utf-8"> <title>Project #2 Treehouse</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Raleway:400,600" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body>

<div class="main-nav" id='top'>
  <nav>
    <ul>
      <li class='name' id='name'>Nickolas Teixeira</li>
      <li class='item' id='home'><a href="#top">home</a></li>
      <li class='item'><a href="#portfolio">portfolio</a></li>
      <li class='item'><a href="#contact">contact</a></li>
    </ul>
  </nav>
</div>

<header class='header'>
  <img src="images/NickolasTeixeira.jpg" alt="Nickolas Teixera">
  <p>Hi! I'm a front-end developer who loves responsive design and css. I recently finished a degree in front-end-web development at Treehouse and am excited to put all my skills to use!</p>
</header>

<main>
  <h1 id='portfolio'>portfolio</h1>
  <!-- Marketing Page -->
  <div class='row'>
    <div class="card">
      <img src="images/portfolio-1.png" alt="Marketing Page">
      <h3>Marketing Page</h3>
      <p>This Project shows the front page of a marketing website meant for a specific business I'm interested in.</p>
    </div>

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

  <!-- Travel App -->
    <div class="card">
      <img src="images/portfolio-3.png" alt="Travel App">
      <h3>Travel App</h3>
      <p>this project compares travel times based on different transportation methods and tells you the best one.</p>
    </div>

    <!-- Map of Favorite Spots -->
    <div class="card">
      <img src="images/portfolio-4.png" alt="Map of Favorite Spots">
      <h3>Map of Favorite Spots</h3>
      <p>This project uses mapping apis to plot points of my favorite spots in the city for a do-it-yourself walking tour.</p>
    </div>


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

    <!-- Calculator -->
    <div class="card">
      <img src="images/portfolio-6.png" alt="Calculator">
      <h3>Calculator</h3>
      <p>Someone can enter in the numbers they want, and press the big blue button and get the results.</p>
    </div>
  </div>
</main>

<footer>
  <h1 id='contact'>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 <span>+1 (111) 555-1234</span></p>
  <p>Email <span>NickolasTeixeira01@gmail.com</span></p>
</footer>
<nav class='footer'>
  <ul>
    <a href="#name"><li class='footer-name'>Nickolas Teixeira</li></a>
    <a href="#top"><li class='tablet'>BACK TO TOP</li></a>
    <a href="#home"><li class='footer-nav'>home</li></a>
    <a href="#portfolio">  <li class='footer-nav'>portfolio</li></a>
    <a href="#contact"><li class='footer-nav'>contact</li></a>
  </ul>
</nav>

</body> </html>

  • { box-sizing: border-box; }

body { font-family: 'Raleway', sans-serif; margin-top: 50px; }

img { width: 100%; }

a { text-decoration: none; color: inherit; } a:hover { text-shadow: 1px 1px #708090; } /===================/ /==== NAVIGATION ===/ /===================/

.main-nav { margin: 0 auto; }

nav { text-align: center; font-weight: bold; list-style: none; text-transform: uppercase; }

nav li { padding: 10px; list-style: none; } .name { font-size: 20px; text-transform: none; }

/===================/ /==== HEADER =======/ /===================/

.header { margin: 30px auto; text-align: center; padding: 20px; background: #708090; color: white; border-radius: 20px; text-shadow: .5px .5px #000; max-width: 75%; }

.header img { border-radius: 50%; max-width: 150px; }

.header p { width: 75%; margin: 0 auto; }

/===================/ /====== MAIN =======/ /===================/

main h1, footer h1 { text-align: center; text-transform: uppercase; }

portfolio {

margin-top: 50px; }

.card { text-align: center; padding: 10px; }

/===================/ /====== FOOTER =====/ /===================/

footer h1 { margin-top: 100px; }

footer { text-align: center; margin: 0 auto; padding: 20px; max-width: 75%; }

footer span { font-weight: bold; }

/===================/ /==== FOOTER NAV ===/ /===================/

.footer ul { display: flex; }

.footer li { outline: 3px solid blue; }

.footer-nav { visibility: hidden; }

.tablet { outline: 10px solid red !important;

}

.footer { margin-bottom: 50px; }

@media screen and (min-width: 768px) {

body { max-width: 95%; margin: 50px auto; }

/======== NAV ========/

.main-nav { margin-bottom: 50px; }

.item { display: inline-block; }

/======== HEADER ======/

.header { width: 80%; height: 200px; }

.header img { float: right; } .header p { width: 60%; float: left; font-size: 20px; text-align: left; }

/======== MAIN ========/

main { margin-top: 100px; clear: both; }

main h1 { margin-bottom: 50px; }

.row { max-width: 100%; margin: 0 auto; }

.row .card { display: inline-block; max-width: 49%; margin: 0 auto; }

/======== Contact ========/

footer { width: 60%; }

/======== Footer Nav ========/

.footer { max-width: 100%; margin: 0 auto; }

.tablet { visibility: hidden; }

ul .footer-nav { visibility: visible; }

}

@media screen and (min-width: 1024px) {

body { max-width: 1100px; }

/* ===== HEADER ===== */

.main-nav, .footer { width: 80%; }

.main-nav ul { display: flex; align-items: flex-end; }

.name { order: 0; }

.item { align-items: flex-end; }

/* ===== MAIN ======= */

.row { max-width: 1150px; } .row .card { max-width: 33%; margin: 0 auto; }

}

Alexander La Bianca
Alexander La Bianca
15,959 Points

Have you tried 'justify-content: flex-end' instead of 'align-items: flex-end'?

1 Answer