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

ARNAB SHARMA
seal-mask
.a{fill-rule:evenodd;}techdegree
ARNAB SHARMA
Full Stack JavaScript Techdegree Student 3,749 Points
Posted by ARNAB SHARMA
.a{fill-rule:evenodd;}techdegree
ARNAB SHARMA
Full Stack JavaScript Techdegree Student 3,749 Points

FLOAT PROPERTY ISN'T WORKING

The float property in my code isn't working, I am using chrome on Ubuntu, could that be an issue? I am attaching the required files:

index.html 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Arnab Sharma | Designer</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href="https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400i,700,700i,800" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Arnab Sharma</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">
                    <a href="img/numbers-01.jpg">
                        <l1><img src="img/numbers-01.jpg" alt=""></l1>
                        <p>Experimentation with color and texture</p>
                    </a>
                    <a href="img/numbers-02.jpg">
                        <l1><img src="img/numbers-02.jpg" alt=""></l1>
                        <p>Playing with blending modes in photoshop</p>
                    </a>
                    <a href="img/numbers-06.jpg">
                        <l1><img src="img/numbers-06.jpg" alt=""></l1>
                        <p>Trying to create an 80's style of glows</p>
                    </a>
                    <a href="img/numbers-09.jpg">
                        <l1><img src="img/numbers-09.jpg" alt=""></l1>
                        <p>Drips created using Photoshop brushes</p>
                    </a>
                    <a href="img/numbers-12.jpg">
                        <l1><img src="img/numbers-12.jpg" alt=""></l1>
                        <p>Creating shapes using repetition</p>
                    </a>
                </ul>
            </section>
            <footer>
                <a href="http://www.twitter.com/ArnabSharma4892"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
                <a href="http://www.facebook.com/arnab.sharma1"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
                <p>&copy; 2017 Arnab Sharma</p>
            </footer>
        </div>
    </body>
</html>
main.css 
/*************************
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;
}

/*************************
COLOR
*************************/

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

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

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

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

/* links */
a {
    color: #6ab47b;
}

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

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

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi there,

First of all, I reformatted your code using forum markdown so we could read it better. Have look at the markdown cheatsheet in the link below to see how to use Markdown.

I was confused by this too when I ran the code through a JS Fiddle. Then I noticed you've accidently set your list item elements li using l1 instead of the former. Change that in your HTML for all your list items and then the floats should start to work. :)