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

Posted by Shafeeq Ahmed
Shafeeq Ahmed
6,058 Points

Border-box does not work

When I apply box-sizing: border-box; style to my page it doesn't work. I have put my HTML and CSS below. Please help me understand why it doesn't work.

My HTML

<!DOCTYPE html>
<html>

  <head>

    <title>Shafeeq Ahmed | Front-End Developer</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="_css/normalize.css">    
    <link rel="stylesheet" href="_css/style.css">
  </head>


  <body>
    <header>
      <div class="container">
        <div class="logo">
          <a href="index.html">
            <h1>Shafeeq Ahmed</h1>
            <h2>Front-End Developer</h2>
          </a>  
        </div>

        <nav>
          <ul id="mainnav">
            <li><a href="index.html">Portfolio</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html" class="selected">Contact</a></li>
          </ul>  
        </nav>
      </div>
    </header>

    <section class="container">

      <p id="contnote">Please don't call my mobile unless it is an emergency. Otherwise feel free to contact me via any other mediums. I will reply to your tweets and facebook posts within two to four days.</p>

      <h3 id="conthead">Contact Info</h3>

      <ul id="contact">
        <li id="tp"><a href="tel:0094779745959">0094779745959</a></li>
        <li id="email"><a href="mailto:exahmedsh@gmail.com">exahmedsh@gmail.com</a></li>
        <li id="fb"><a href="https://www.facebook.com/shafeeq.ahmed.33234">Facebook</a></li>
        <li id="twt"><a href="https://twitter.com/ahmedmws">Twitter</a></li>

      </ul>

    </section>


    <footer>
      <div class="container">
        <img src="_img/facebook-wrap.png" alt="facebook_logo">
        <img src="_img/twitter-wrap.png" alt="twitter_logo">
        <p>Copyrights &copy; 2016 Shafeeq Ahmed.</p>
      </div>
    </footer>
  </body>
</html>

and My CSS

* {
  box-sizing: border-box;
}

header {
  background-color: greenyellow;
  padding: 1em;

}

h1 {
  margin-top: 0;
}

footer {
  background-color: lightgreen;
  padding: 1em;

}

I have also used normalize.css as my browser reset.

Ashish Mehra
Ashish Mehra
Courses Plus Student 103 Points

i face the same problem many times than i put that property in class or id where it is required

2 Answers

mkmk
mkmk
15,897 Points

It may be a problem with the browser you are using, less than recent versions of safari, chrome and firefox will need their respective vendor prefixes:
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

I recommend looking at CSS-Tricks for more details: https://css-tricks.com/box-sizing/

Shafeeq Ahmed
Shafeeq Ahmed
6,058 Points
Shafeeq Ahmed
Shafeeq Ahmed
6,058 Points

Surprisingly it is working now. Even in the same browser i tried before. I did not change anything but I add more css styles to some elements. I did nothing but wait and now it is fixed by it self.

Thanks u guys.