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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Matthew Alessandri
Matthew Alessandri
326 Points

Gray text box exceeds images

When I stretch the page out to full size, the gray box around the images stretch about 30px to the right. However, when i minimize the page the mobile view, it aligns perfectly. Any reason the image and box do not maintain the same width when the page is full screen?

Matthew Alessandri
Matthew Alessandri
326 Points 
/*******************************
GENERAL
*******************************/

body {
  font-family: 'Arimo', sans-serif;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
}


/*******************************
HEADING
*******************************/

header {
  float: left;
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}

#logo {
  margin: 20px;
}



/*******************************
NAVIGATION
*******************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 6px 0 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 600;
  padding: 15px 10px;
}

/*******************************
FOOTER
*******************************/

footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
  clear: both;
}



/*******************************
PAGE: PORTFOLIO
*******************************/

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

#gallery li a p {
  margin: 0;
  padding: 5%;
  font-size: 0.75em;
  color: #bdc3c7;
}

/*******************************
COLORS
*******************************/

/* site body */
body {
  background-color: #FCFCFC;
  color: #999;
}

/* green header */
header {
  background: #FCFCFC;
  border-color: #FCFCFC;
}

/* nav background on mobile */
nav {
  background: #5C9B92;
}

/* links */
a {
  color: #5C9B92;
}

/* nav links */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

(Edited: by BothXP to add the markdown to format the CSS)

4 Answers

Maria Caruso
Maria Caruso
2,858 Points
Maria Caruso
Maria Caruso
2,858 Points

It's hard to tell without your html. Try changing your max-width on the wrapper to 100%. How does that affect the elements? I suspect that since your max-width is set to an exact amount and everything else is set to percentages, this is what is causing the issue.

Matthew Alessandri
Matthew Alessandri
326 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Matthew Alessandri | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <div style="text-align:center;"><img src="img/Logo.svg" alt="logo"></div>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Work</a></li>
          <li><a href="about.html">Personal</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
     </header>   
     <div id="wrapper">
     <section>    
      <ul id="gallery">
        <li>
          <a href="img/21.PNG">
            <img src="img/21.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/22.PNG">
            <img src="img/22.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/23.PNG">
            <img src="img/23.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/24.PNG">
            <img src="img/24.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/25.PNG">
            <img src="img/25.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/26.PNG">
            <img src="img/26.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
      </ul>
     </section>
     <footer>
      <p>&copy; 2015 Matthew Alessandri.</p>
     </footer>
    </div>
   </body>
</html>
bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

Hi Matthew,

I agree with Maria that we are probably going to need you to post your HTML to try and figure out what's happening. I don't think it's going to be to do with the max-width or your use of %'s as that is how the CSS is setup in the course.

I tried using the CSS that you posted against the HTML used in the course and I couldn't replica your issue.

Matthew Alessandri
Matthew Alessandri
326 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Matthew Alessandri | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <div style="text-align:center;"><img src="img/Logo.svg" alt="logo"></div>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Work</a></li>
          <li><a href="about.html">Personal</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
     </header>   
     <div id="wrapper">
     <section>    
      <ul id="gallery">
        <li>
          <a href="img/21.PNG">
            <img src="img/21.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/22.PNG">
            <img src="img/22.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/23.PNG">
            <img src="img/23.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/24.PNG">
            <img src="img/24.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/25.PNG">
            <img src="img/25.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
        <li>
          <a href="img/26.PNG">
            <img src="img/26.PNG" alt="">
            <p>Frayed</p>
          </a>
        </li> 
      </ul>
     </section>
     <footer>
      <p>&copy; 2015 Matthew Alessandri.</p>
     </footer>
    </div>
   </body>
</html>
bothxp
bothxp
16,510 Points
bothxp
bothxp
16,510 Points

Thanks for adding the HTML.

I've tried out using your HTML & CSS, just substituting in some images. In my tests the grey boxes appear to be sizing ok. Am I note looking at the right thing?

http://bothxp.co.uk/testing/Treehouse_1.jpg

Matthew Alessandri
Matthew Alessandri
326 Points

how strange, even in full screen desktop mode the gray boxes line up correct? Maybe i need to change browsers

Maria Caruso
Maria Caruso
2,858 Points
Maria Caruso
Maria Caruso
2,858 Points

There will be some sizing issues across browsers. Chrome has a much wider layout than firefox for example. Personally, I've not found an easy way around this other than adding extra padding to compensate between browser differences.