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

Mindaugas Kuliesius
Mindaugas Kuliesius
3,553 Points
Posted by Mindaugas Kuliesius
Mindaugas Kuliesius
3,553 Points

5 photos - middle photo is aligning to right, leaving gap on left side in middle row.

Ive checked the coding everything looks same as in video im quite confused which part could be wrong. all 5 images are same size made max width 100% as in video idk what could make that 1 left out in middle. except that thing all works perfectly( i mean pictures are seen all good just 1 bug of not being parted by 2).

/*************************************
GENERAL
**************************************/

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

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

a {
 text-decoration: none; 
}

img {
  max-width: 100%;
}

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

#logo {
  text-align: center;
  margin: 0;
}

h1 {
 font-family: 'Changa One', sans-serif; 
 margin: 15px 0;
 font-size: 1.75em;
 font-weight: normal;
 line-height: 0.8em;
}

h2 {
 font-size: 0.75em;
 margin: -5px 0 0;
 font-weight: normal; 
}  

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

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


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

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


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

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

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

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

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

/* green header */
header {
 background: #6ab47b;
 border-color: #599a68;
}

/* nav background on mobile */
nav {
 background: #599a68;
}

/* logo text */
h1, h2 {
 color: #fff; 
}

/* links */

a {
 color: #6ab47b; 
}


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

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

And the Index.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mindaugas Kuliesius | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Changa+One:400,400i|Rubik+Mono+One" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Mindaugas Kuliesius</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
        <ul id="gallery">
          <li>
            <a href="img/Numbers-01.jpg">
              <img src="img/Numbers-01.jpg" alt="">
              <p>Experimentation with colors and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/Numbers-02.jpg">
              <img src="img/Numbers-02.jpg" alt="">
              <p>Water Drop.</p>
            </a>
          </li>
          <li>
            <a href="img/Numbers-03.jpg">
              <img src="img/Numbers-03.jpg" alt="">
              <p>Gorgeous view of Bixby bridge,CA.</p>
            </a>
          </li>
          <li>
            <a href="img/Numbers-06.jpg">
              <img src="img/Numbers-06.jpg" alt="">
              <p>Beautiful Sunny day.</p>
            </a>
          </li>
          <li>
            <a href="img/Numbers-05.jpg">
              <img src="img/Numbers-05.jpg" alt="">
              <p>Sea with Corals in it.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <img src="img/twitter-wrap.png" alt="Twitter Logo">
        <a href="http://facebook.com/mindaugas.kuliesius"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2017 Mindaugas Kuliesius.</p>
      </footer>
    </div>
   </body>
 </html>
Michael Lambert
Michael Lambert
6,286 Points
Michael Lambert
Michael Lambert
6,286 Points

can you share your workspace by clicking on Take Snapshot?

1 Answer

Michael Lambert
Michael Lambert
6,286 Points
Michael Lambert
Michael Lambert
6,286 Points

Your going to have unexpected behaviour when you haven't got all images linked correctly. I'm only seeing 3 images out of the total 6. Check the src= for the other 3 missing images is using the exact filename of the actual images. Once you have that fixed, the results should be as expected, ie, two columns of images stacked neatly on top of each other.

Mindaugas Kuliesius
Mindaugas Kuliesius
3,553 Points
Mindaugas Kuliesius
Mindaugas Kuliesius
3,553 Points

all pictures are there just 3 others got diff numbers.. i writed and changed to make it nicely 3-4-5 nothing changes mate i doubt the number simply can screw it cause codding is write good as u can see src all good... idk what u saying