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

Posted by Matt S
Matt S
1,497 Points

Where is the CSS that makes the "Goals" appear in the right side?

This is probably so easy, and I'll be mad when someone points it out to me.

For the "Intro to HTML and CSS" course, the website example shows a 2 column layout. I've seen the divs and classes, and am just not seeing what CSS is pushing the "Goals" section to the right?

I would think first off it's floated, but there is not float in the CSS.

Thanks for any help.

Uriah Nevins
Uriah Nevins
1,121 Points

You need to post your code, so people can help.

3 Answers

David Trejo
David Trejo
19,914 Points
David Trejo
David Trejo
19,914 Points

Can you post the code?

Matt S
Matt S
1,497 Points
Matt S
Matt S
1,497 Points

Ooops, sorry all.

Here is the HTML:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Jane Smith's Profile</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css?family=Muli%7CRoboto:400,300,500,700,900" rel="stylesheet"></head>
  <body>

    <div class="main-nav">
        <ul class="nav">
          <li class="name">Jane Smith</li>
          <li><a href="#">Home</a></li>
          <li><a href="#">Experience</a></li>
          <li><a href="#">Photos</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </div>

    <header>
      <img src="images/me.png" alt="Drawing of Jane Smith" class="profile-image">
      <h1 class="tag name">Hello, I’m Jane.</h1>
      <p class="tag location">My home is Portland, Oregon.</p>
    </header>

    <main class="flex">
      <div class="card">
        <h2>Background</h2>
        <p>I’m an aspiring web designer who loves everything about the web. I've lived in lots of different places and have worked in lots of different jobs. I’m excited to bring my life experience to the process of building fantastic looking websites.</p>
        <p>I’ve been a professional cook and gardener and am a life-long learner who's always interested in expanding my skills.</p>
      </div> 

      <div class="card">
        <h2>Goals</h2>
        <p>I want to master the process of building web sites and increase my knowledge, skills and abilities in:</p>
        <ul class="skills">
          <li>HTML</li>
          <li>CSS</li>
          <li>JavaScript</li>
          <li>Ruby</li>
          <li>Rails</li>
        </ul>
        <p>I’d like to work for a web design firm helping clients create an impressive online presence.</p>
      </div> 

    </main>
    <footer>
      <ul>
        <li><a href="#" class="social twitter">Twitter</a></li>
        <li><a href="#" class="social linkedin">LinkedIn</a></li>
        <li><a href="#" class="social github">Github</a></li>
      </ul>
      <p class="copyright">Copyright 2015, Jane Smith</p>
    </footer>
  </body>
  </html>

And the CSS:

/* Global Layout Set-up */
* { 
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  /*text-align: center;*/
  font-family: 'Roboto', sans-serif;
  color: #222;
  background: #f7f5f0;
}
/* Link Styles */

a {
  text-decoration: none;
  color: #0499ff;
}
a:hover {
  color: #6633ff;
}

/* Section Styles */

.main-nav {
  width: 100%;
  background: black;
  min-height: 30px;
  padding: 10px;
  position: fixed;
  text-align: center;
}
.nav {
  display: flex;
  /*justify-content: space-around;*/
  font-weight: 700;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
}
.nav .name {
  display: none;
}
.nav li {
  padding: 5px 10px 10px 10px;
}
.nav a {
  transition: all .5s;
}
.nav a:hover {
  color: white
}

header {
  text-align: center;
  background: url('images/portland.jpg') no-repeat top center ;
  background-size: cover;
  overflow: hidden;
  padding-top: 60px;
}
header {
  line-height: 1.5;
}
header .profile-image {
  margin-top: 50px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid white;
  transition: all .5s;
}
header .profile-image:hover {
  transform: scale(1.2) rotate(5deg);
}
.tag {
  background-color: #efefef;
  color: black;
  padding: 10px;
  border-radius: 5px;
  display: table;
  margin: 10px auto;
} 
.location {
  background-color: #222;
  color: yellow;
}
.card {
  margin: 30px;
  padding: 20px 40px 40px;
  /*max-width: 500px;*/
  text-align: left;
  background: #fff;
  border-bottom: 4px solid #ccc;
  border-radius: 6px;
}
.card:hover {
  border-color: #ff99ff;
}

ul.skills {
  padding: 0;
  text-align: center;
}

.skills li {
  border-radius: 6px;
  /*display: inline-block;*/
  background: #ff9904;
  color: white;
  padding: 5px 10px;
  margin: 2px;
}

.skills li:nth-child(odd) {
  background: #0399ff;
}

footer {
  width: 100%;
  min-height: 30px;
  padding: 20px 0 40px 20px;
}

footer .copyright {
  top: -8px;
  margin-right: 20px;
  font-size: .75em;
}

footer ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

footer ul li {
  display: inline-block;
}

a.social {
  display: inline-block;
  text-indent: -9999px;
  margin-left: 5px;
  width: 30px;
  height: 30px;
  background-size: 30px 30px;
  opacity: .5;
  transition: all .25s;
}
a.twitter {
  background-image: url(images/twitter.svg);
}
a.linkedin {
  background-image: url(images/linkedin.svg);
}
a.github {
  background-image: url(images/github.svg);
}
a.social:hover {
  opacity: 1;
}
.clearfix {
  clear: both;
}

/* Styles for larger screens */
@media screen and (min-width: 720px) {

  .flex {
      display: flex;
      max-width: 1200px;
      justify-content: space-around;
      margin: 0 auto;
  }

  header {
    min-height: 450px;
  }

  .nav {
    max-width: 1200px;
  }

  .nav .name {
    display: block;
    /*margin-right: auto;*/
    color: white;
  }

  main {
    padding-top: 50px;
  }

  main p {
    line-height: 1.6em;
  }

  footer {
    font-size: 1.3em;
    max-width: 1200px;
    margin: 40px auto;
  }

}
Uriah Nevins
Uriah Nevins
1,121 Points

Is it below, or in line with your other div's?

James Nealon
James Nealon
886 Points
James Nealon
James Nealon
886 Points

This is due to the parent div being a "Flex" div. Flex give row or column directions, this one a row layout. That means each child element will be placed side by side.