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

Giulia Bluestein
Giulia Bluestein
1,588 Points

Need help. I am trying to create a website.

Hi Treehouse Community,

After a few courses completed, I decided it was time for me to start practicing. So, I am trying to create a responsive website. I started to create a mobile version of my website, and I like the final result. I proceeded to use media rules to set the different layouts as the screen gets bigger.

And here I ran into a few issues. The "About" h3 ends up as part of my header and body, when I actually would like it to be separate from the first section.

What am I doing wrong?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Giulia Bluestein | Bilingual Web Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=KoHo:400,400i,500,500i,600,600i,700,700i|Niconne|Playball" rel="stylesheet">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Giulia Bluestein</h1>
        <h2>Web Developer & Italian Teacher</h2>
      </a>
      <nav>
          <ul>
            <li><a href="index.html" class="selected">Services</a></li>
            <li><a href="index.html#about">About</a></li>
            <li><a href="index.html#contact">Contact</a></li>
          </ul>
      </nav>
    </header>
    <div id="wrapper">
    <section>
      <ul id="gallery">
        <li class="img1">
          <a href="img/Web1.jpeg">
            <img src="img/Web1.jpeg" alt="">
            <p>Web Developer Services</p>
          </a>
        </li>
        <li class="img2">
          <a href="img/ParliItaliano.jpg">
            <img src="img/ParliItaliano.jpg" alt="">
            <p>Italian Classes</p>
          </a>
        </li>
      </ul>
    <div id="about">
      <h3> About </h3>
      <p> Welcome to my page!<br> I am Giulia Bluestein, I am a web devoloper and an Italian teacher. I was born and raised in Milano, Italy. In my spare time, I like enjoying my espresso, hiking and living an healthy lifestyle.</p>
    </div>
    <div id="contact">
      <h3> Contact </h3>
      <p> Feel free to contact me, if you have any questions.<br> You can reach me on Facebook and Linkedin, clicking on the logos at the bottom of the page.<br><br>
      You can also contact me via email:<br>
      <li class="mail"><a href="mailto:giulia.sessa93@gmail.com">giulia.sessa93@gmail.com</a></li></p>
    </div>
  </section>
    <footer class="footer">
      <a href="https://www.linkedin.com/in/giulia-bluestein-9b689a5b/"><img src="img/LinkedIn.png" alt ="LinkedIn Logo" class="social-icon"></a>
      <a href="https://www.facebook.com/sweetjuls93"><img src="img/facebooklogo.png" alt ="Facebook Logo" class="social-icon"></a>
      <p>&copy; 2018 Giulia Bluestein.</p>
    </footer>
    </div>
  </body>
</html>

CSS

/*********************************
GENERAL
*********************************/
body {
  font-family: "KoHo", sans-serif;
}

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

a {
  text-decoration: none;
}

img {
  max-width: 90%;
  float: center;
  opacity: 1;
}

img:hover {
  opacity: 0.7;
}

#gallery {
  list-style: none;
  text-decoration: none;
  margin-bottom: 90px;
}

#gallery a img {
  border-radius: 100%;
}

li.img1{
  text-align: center;
  margin-bottom: 100px;
  margin-right: 30px;
  padding: 200px 0 0 0;
}

li.img2{
  text-align: center;
  margin-bottom: 100px;
  margin-right: 30px;
  padding: 0;
}


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

header {
  float: left;
  margin: -20px 0 50px 0;
  padding: 0 0 0 0;
  width: 100%;
}

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

h1 {
  font-family: "Playball", sans-serif;
  margin: 15px 0;
  font-size: 2em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  font-family: "KoHo", sans-serif;
  font-size: 1.15em;
  margin: -5px 0 0;
  font-weight: normal;
}


h3 {
  font-family: "Niconne", sans-serif;
  font-size: 1.75em;
  text-align: center;
  line-height: 1.85em;
  padding: 0;
  margin: 0 -20px;
  margin-bottom: 50px;
}


/*********************************
NAVIGATION BAR
*********************************/


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;
}

nav a {
  font-family: "Niconne", sans-serif;
  font-weight: bolder;
  font-size: 1.35em;
  padding: 15px 10px;
}

/*********************************
PAGE: ABOUT
*********************************/

#about {
  margin-bottom: 80px;
}


/*********************************
PAGE: CONTACT
*********************************/

#contact {
  margin-bottom: 180px;
}

.mail {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9em;
}

.mail a{
  list-style: none;
  min-height: 20px;
  background-size: 20px 20px;
  background-image: url(../img/mail.png);
  background-repeat: no-repeat;
  padding: 0 0 0 30px;
}


/*********************************
FOOOTER
*********************************/

footer {
  font-family: "Niconne", sans-serif;
  font-size: 1.30em;
  text-align: center;
}

.social-icon {
  width: 30px;
  height: 30px;
  margin: 10px 5px -10px 5px;
}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    max-height: 18%;
}

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

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

/* gold header*/
header {
  background: #DEB887;
  border-color: #B8860B;
}

/* nav background on mobile */
nav {
  background-color: #B8860B;
}

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

/* color links */
a {
  color: #000;
}

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

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


/* color footer */
footer {
  color: #DEB887;
  background-color: #B8860B;
  font-weight: 400;
}


h3 {
  background-color: #DEB887;
  color: #fff;
}

@media screen and (min-width: 480px)  {

  /*********************************
  TWO COLUMN LAYOUT
  *********************************/

  img {
    max-width: 120%;
    opacity: 1;
  }

  img:hover {
    opacity: 0.7;
  }

  li.img1 {
    width: 30%;
    float: left;
    padding: 50px 5px;
    margin: 0px 20px;
  }

  li.img2 {
    width: 30%;
    float: right;
    padding: 50px 5px;
    margin: 0px 60px;
  }

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

  header {
    float: left;
    margin: -90px 0px 50px 0;
    padding: 0 0 0 0;
    width: 100%;
}

}

1 Answer

Hi Giulia,

Looks like the issue is due to the header being floated.

Try adding clear: both to the #about element. For example:

#about {
  margin-bottom: 80px;
  clear: both;
}

This should stop the header and about areas from overlapping.

See CSS Tricks - All about floats for a good explanation.

Hope this helps :)

Giulia Bluestein
Giulia Bluestein
1,588 Points

Thank you so much, James!

I ended up using "display: inline-block" and it worked. Do you think that is a valid option as well?

Using inline-block is fine and in my opinion is probably the better option. Floats can be quite difficult to manage sometimes.