Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

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

can you share your workspace by clicking on Take Snapshot?

1 Answer

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

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