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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Adrian Pandelica
PLUS
Adrian Pandelica
Courses Plus Student 2,106 Points

Style the Portfolio

I've done everything like in the video but my website doesn't have pics side by side. Can someone help me ? thx

Janek Rezner
Janek Rezner
12,973 Points

you have to show us your code first!

7 Answers

Adrian Pandelica
PLUS
Adrian Pandelica
Courses Plus Student 2,106 Points

/****************************** General *******************************/

body { font-family: 'Oswald', 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 {

text-align: center; margin: 0; }

h1 { font-family:'Roboto', 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; }

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

nav li { display: inline-block; }

/****************************** 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 *******************************/

body { background-color: #fff; color: #999; }

/* green header */

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

/* nav bacakground 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; }

Janek Rezner
Janek Rezner
12,973 Points

no # signs before elements you're trying to style (invalid selectors) ?

like this:

#gallery {

margin: 0; padding: 0; list-style: none; }

#gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
Adrian Pandelica
PLUS
Adrian Pandelica
Courses Plus Student 2,106 Points

/****************************** General *******************************/

body { font-family: 'Oswald', 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 { text-align: center; margin: 0; }

h1 { font-family:'Roboto', 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; }

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

nav li { display: inline-block; }

/****************************** 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 *******************************/

body { background-color: #fff; color: #999; }

/* green header */

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

/* nav bacakground 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; }

Janek Rezner
Janek Rezner
12,973 Points

use Markdown Cheatsheet to wrap your code before you post it here

Adrian Pandelica
PLUS
Adrian Pandelica
Courses Plus Student 2,106 Points

/****************************** General *******************************/

body { font-family: 'Oswald', 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 { text-align: center; margin: 0; }

h1 { font-family:'Roboto', 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; }

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

nav li { display: inline-block; }

/****************************** 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 *******************************/

body { background-color: #fff; color: #999; }

/* green header */

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

/* nav bacakground 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; }