Need help. I am trying to create a website.

Question

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

}

Answer 1 · 2018-11-17T13:16:58Z

November 17, 2018 1:16pm

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 :)

Welcome to the Treehouse Community

Looking to learn something new?

Giulia Bluestein

Giulia Bluestein

Need help. I am trying to create a website.

1 Answer

James Anwyl

James Anwyl

Giulia Bluestein

Giulia Bluestein

James Anwyl

James Anwyl