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

Jeriah Bowers
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points
Posted by Jeriah Bowers
.a{fill-rule:evenodd;}techdegree seal-36
Jeriah Bowers
Front End Web Development Techdegree Graduate 20,590 Points

Images won't center inside div.

I can't center the images in the tablet breakpoint why?? And also The bottom left image isn't the same size as the rest.. I know it's probably something simple and it's starting to frustrate me. Thank-You.. 

<!DOCTYPE html>
<html>
<head>
  <title>Jer1ah Bowers</title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Spectral" rel="stylesheet">
  <meta name="viewport" content="width=device-width">
</head>
<body>
<header>
    <h2 id="title">Jer1ah Bowers</h2>
    <div id="navWrap">
        <nav class="navlist">
          <li><a href="#home">Home</a></li>
          <li><a href="#portfolio">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </nav>
    </div>
</header> <!--end nav-header-->

 <div id="home">
    <img src="images/responsive-layout-profile.png" alt="Picture">
      <p>Hello there! My name is Jeriah, I am currently a front-end developer in training. I've been taking courses at TreeHouse for 5 months now, and hopefully soon enough I'll finish my tech degree and can continue pursuing my dream.</p>
 </div> <!--end main-heading-->

<div class="wrapper clearfix">         
    <h2>Portfolio</h2>
      <ul id="gallery">
            <li><img src="images/portfolio-1.png" alt="Marketing Page"><h3>Marketing Page</h3><p>This project shows the front page of a marketing website for a specific bussiness I'm interested in.</p>
            </li>
            <li><img src="images/portfolio-2.png" alt="Search Page"><h3>Search Page</h3><p>This project searches thru a specific database to find information that the user is trying to look up.</p></li>
            <li><img src="images/portfolio-3.png" alt="Travel App"><h3>Travel App</h3><p>This app compares travel times based on different transportation methods and tells you  the best one.</p></li>
            <li><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 for my favorite spots in the city for a do it yourself walking tour!</p></li>
            <li><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></li>
            <li><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 to see the results.</p></li>
      </ul>
</div> <!--end wrapper div-->

<div id="contact">
    <h3>Contact</h3>
    <p>If you're interested in chatting or want any more information about what I've been working on, I'd love to hear from you!</p>
    <div id="info">
        <p>Phone <b class="number">980-622-1490</b></p>
        <p>Email <b class="email">jeriah97bowers@yahoo.com</b></p>
    </div> <!--end info div-->
</div> <!--end contact div-->
    <hr>
<footer>
    <div id="bottomNav">
      <div class="footr">
        <a href="https://www.facebook.com/Jman197"><h3 class="left">Jer1ah Bowers</h3></a>
        <a href="#home"><h3 class="right">Back To Top</h3></a>
      </div>
        <div class="navBottom">
            <ul>
              <li><a href="#home">Home</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
        </div> <!--end navBottom div-->
    </div> <!--end bottomNav div-->  
</footer>

</body>
</html>

And here is the CSS 

body {
    background-color: #f2f4f7;
    margin: 0;
    font-family: 'Spectral', serif;
}

p {
    font-size: 1.2em;
}

a {
    text-decoration: none;
    color: black;
}

ul li {
    list-style-type: none;
}

/*Home Styling*/


#home {
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
}

 #home img {
    width:  85%;
    margin: 1.5em 0em;
    margin-top: 3em;
}

#home p {
    font-size: 1.2em;
    margin-bottom: 3em;
}

/*Nav Styling*/

.navlist li {
   font-size: 1.5em;
   list-style: none;
   padding: 0.7em;
   margin-top: 0.3em;
   text-align: center;
   background: white;
}

header h2 {
    text-align: center;
}

#navWrap {
    max-width: 90%;
    margin: auto;
}


/*Portfolio Styling*/

.wrapper {
    max-width: 100%;
    margin: 0;
    background-color: white;
}

#gallery {
    list-style: none;
    margin: 0;
    padding: 0;
}

#gallery h3 {
    font-size: 1.4em;
}

#gallery img {
    max-width: 100%;
}

#gallery li {
    max-width: 90%;
    text-align: center;
    margin: auto;
    padding-top: 1em;
}

.wrapper h2 {
   text-align: center;
   padding-bottom: 1em;
   padding-top: 2em;
}

#gallery li:nth-last-child(1) {
   padding-bottom: 3em;
}

#gallery p {
    max-width: 88%;
    margin: auto;
    margin-bottom: 1em;
}

/*Contact Styling*/

#contact {
    text-align: center;
    max-width: 95%;
    margin: auto;
}

#contact h3 {
    font-size: 1.5em;
    padding-top: 1.5em;
    padding-bottom: 0.7em;
}

#info {
    margin-top: 2em;
    margin-bottom: 4em; 
}

.number, .email {
    margin-left: .5em;
}


/*Footer Styling*/


.left {
    float: left;
    margin-left: 1.5em;
}

.right {
    float: right;
    margin-right: 1.5em;
}

.navBottom {
    list-style-type: none;
    display: none;
}

/*Media Queries*/

@media (min-width: 768px) {

   /*Home/Nav List Styles*/

   #home {
        margin: 1em;
        margin-top: 2em;
        display: inline-block;
        max-width: 95%
    }

    #home img {
        max-width: 48%;
        float: right;
        margin: auto;
    }

    #home p {
        max-width: 48%;
        float: left;
        margin: auto;
        text-align: left;
}

    .navlist li {
        display: inline-block;
        background-color: #f2f4f7;
        padding: 0;
        margin: .7em;

    }

    .navlist {
        text-align: center;
    }


    /*Portfolio Styling*/


    #gallery li {
     display: inline-block;
     max-width: 40%;
     float: left;
    }

    #gallery img {
        max-width: 95%;
    }



    /*Contact/Footer Styles*/

    #contact p {
        max-width: 75%;
        margin: auto;
    }

    .right {
        display: none;
    }

    .navBottom {
        display: block;
        width: 45%;
        float: right;
        margin: auto;
    }

    .navBottom ul {
        text-align: center;
    }

    .navBottom li {
        display: inline-block;
        margin-right: 1.3em;
        font-size: 1.2em
    }

    .footr {
        width: 45%;
        float: left;
        text-align: center;
    }


    @media (min-width: 1024px) {

    }      



/*ClearFix*/

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

1 Answer

Tray Denney
PLUS
Tray Denney
Courses Plus Student 12,884 Points
Tray Denney
Tray Denney
Courses Plus Student 12,884 Points

While running the code I noticed that all of the content in your portfolio section were all off center. This was caused by a "float: left" on line 193 where you are targeting the #gallery li in a media query. I'm not sure if that is the issue you were having as I cannot see the images themselves.

The top part of your website being off centered can be fixed by adding some margin-left and margin-right to the children of #home as you see fit. Let me know if this is not the issue you are having and I can try to help further.