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

Amanda Bater
Amanda Bater
7,686 Points

Weird padding - can't get rid of it?

I'm building a website as a personal project, and on my 'contact' page, everything is a little too far to the right when it should be in the center. I've had a look in developer tools and it seems that there's some left padding thats pushing everything over, but I can't find it in my css. Does anyone know why this is happening? I've put red borders around each element so everything is more visible.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toby Dashwood Editing</title>
    <script src="script.js"></script>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">

  </head>

  <body id="top">
    <div class="wrap">
    <header class="main-header">
      <h1 class="name"><a href="index.html">Toby Dashwood Editing</a></h1>
      <nav>
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html" class="current">Contact</a></li>
        </ul>
      </nav>
    </header>

    <div id="container">
      <section>
        <ul class="contact-info">
         <li class="find">
           <a href="https://www.google.co.uk/maps/place/Lighthouse+Studios/@51.5524512,-0.0732568,17z/data=!3m1!4b1!4m2!3m1!1s0x48761c8b51e26a4b:0xb7b73f70c581a792" target="_blank"><img src="img/find.jpg" alt="Map Pin" class="contact-logo"></a>
           <h3>Find</h3>
           <p>Lighthouse Studios, Unit C004,
89A Shacklewell Lane,
London
E8 2EB</p>
          </li>
          <li class="phone">
             <a href="tel:07876548658"><img src="img/phone.jpg" alt="Phone Logo" class="contact-logo"></a>
             <h3>Call</h3>
             <p>07876548658</p>
          </li>
          <li class="mail">
            <a href="mailto:tobydashwood@gmail.com"><img src="img/mail.jpg" alt="Mail Logo" class="contact-logo"></a>
            <h3>Email</h3>
            <p>tobydashwood@gmail.com</p>
          </li>
        </ul>
      </section>

    </div>
    </div>

          <footer>
        <h3>Social</h3>
        <a href="https://twitter.com/tobycdash" target="_blank"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="https://vimeo.com/tobydashwood" target="_blank"><img src="img/vimeo-wrap.png" alt="Vimeo Logo" class="social-icon"></a>
        <a href="https://www.linkedin.com/in/toby-dashwood-58105316" target="_blank"><img src="img/linked-wrap.png" alt="LinkedIn Logo" class="social-icon"></a>
        <p>&copy; 2016 Toby Dashwood Editing.</p>
         <div class="scroll">
            <a href="#top" onclick="scrollToTop();return false"><img src="img/backtotop.png"></a>
         </div>
      </footer>
  </body>
  </html>
/******************************
GENERAL
******************************/

* {
  border: 1px solid red;
}

body {
  font-family: "Montserrat","Open Sans","Arial",sans-serif;
}

a {
  text-decoration:none;
}

img {
  max-width: 100%;
}

.top {
 width: 20px;
 height: 20px;
}

/******************************
CONTAINER
******************************/
#container {
  padding-left: 1em;
  padding-right: 1em;
}



a, a:visited {
 color: #222222;
}

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

.name {
  text-align:center;
  margin: 0;
}
.name a {
  padding-left: 10px;
  padding-right: 10px;
}

.main-header {
  margin: 0 0 30px 0;
  padding: 30px 0 0 0;
  width: 100%;
}

h1 {
  color: #222222;
  text-transform: uppercase;
  font-family: "Montserrat","Open Sans","Arial",sans-serif;
  font-weight: 100;
  font-size: 1.5em;
  line-height: 1.2em;
}

/******************************
NAVIGATION
******************************/

nav {
  text-align: center;
  padding:5px 0;
  margin: 0;
  font-family: "Montserrat","Open Sans","Arial",sans-serif;
  font-size: .8em;
  text-transform: uppercase;
}

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

nav li {
  margin-top: 8px;
  margin-bottom: 8px;
}

nav a {
  font-weight: normal;
  padding-left: 15px;
  padding-right: 15px;
}

nav a.selected, nav a:hover {
  color: #ffae00;
}

nav li a.current {
  color: #ffae00;
}

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

h3 {
  font-size: 0.8em;
  font-weight: normal;
  text-align: center;
}

p {
  font-size: 0.8em;
  font-weight: 50;
}

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

.contact-info {
  list-style-type: none;
  text-align: center;
}

.contact-info img {
  border-radius: 100%;
  width: 80px;
  height: 80px;
}

.contact-info h3 {
  text-transform: uppercase;
}

.contact-info p {
  font-size: 0.8em;
  line-height: 1.8em;
}

/******************************
PAGE:FOOTER
******************************/

footer {
  font-size: 0.7em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  padding-bottom: 30px;
  padding-left: 30px;
  color: white;
  background-color: #222222;
  margin: none;
}

footer h3 {
  text-transform: uppercase;
  text-align: center;
}

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

.scroll img {
  height: 20px;
  width: 20px;
}

.scroll {
  margin-top: 20px;
}

/******************************
MEDIA QUERIES
******************************/

@media (min-width: 769px) {

.wrap {
  min-height: calc(100vh - 201px);
}

#container {
  max-width:70%;
  margin: 0 auto;
  padding: 0 10%;
}



}

2 Answers

The only thing I can see is that you're using Em's for your containers padding values. Em's are based off of the current

font-size (1 em = 16px) so if you change your font-size later in the CSS , you change your container's padding too.

It's better to use a percentage width

/******************************
CONTAINER
******************************/
#container {
  padding-left: 1em;        //Try padding-left: 1%;  play with the percentages, see what works.
  padding-right: 1em;
}

Hope this helps!

Jeremy Franklin

Amanda Bater
Amanda Bater
7,686 Points

On closer inspection it turned out to be something from normalize.css, was able to override it in main.css by using a more specific rule to target the contact info class and reomve padding.

Thanks for tip about using percentages, I've amended this too!