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 erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Header problem

My header wont span the full width of the page, heres a image of it http://imgur.com/QqfcdGg

and heres the css

body {
    background: url('../img/background.jpg');
    font-family: 'Oswald', sans-serif;
    color: #fff;
    width: 100%;
}

header {
  background: url('../img/texture-logo.png'), black;
  background-position: center;
  padding: 40px;
  margin-bottom: 200px;
  min-height: 100%;
  width: 100%;
}

header {
    border-bottom: 5px solid white;
}

.main-logo {
        width: 400px;
}

.main-wrapper {
    width: 1500px;
    margin: 0 auto;
    padding-left: 5%;
    padding-right: 5%;
}



.first-content img{
   width: 200px;
   height: 200px;
   border: 5px solid white;
   border-radius: 10px;
}

.first-content a:hover {
   opacity: .7;
}

.first-content li {
    float: left;
    width: 200px;
}

.first-content ul li{
    margin: 40px;
    list-style: none;
}

.first-content {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.first-content ul li p {
    letter-spacing: 2px;
}


.second-content p{
   color: #FFF;
}

.second-content {
    clear:both;
    width: 50%;
    text-align: center;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    border: 5px solid white;
    border-radius: 40px;
    margin-top: -80px;
    overflow: visible;
}



footer {
    clear:both;
    text-align: center;
    font-size: 20px;
    color: #FF6600;
    font-weight: 900;
}

footer {
    border-top: 1px solid white;
}







/***BUTTON FOR SECOND CONTENT****/


.button {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5px;
    border: 1px solid black;
    border-radius: 20px;
    background-color: #FF6600;
    text-align: center;
    margin-bottom: 2px;
}

.button {
    font-weight: bold;
}

.button:hover {
   background-color: #FF6633;
}
Aglaya Orinko
Aglaya Orinko
5,839 Points

No html? My blind guess is that it is caused by something like

<header class="main-logo" style="width: 645px; background-position: center; background-repeat: no-repeat;">blahblahblah</header>
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

heres the html, and also when im on desktop size with the browser i can scroll to the right, how do i fix that? (is it because of the background image?)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<title>official website</title>
</head>
<body>
    <header class="main-header group">
        <img class="main-logo" src="img/logo.png">
    </header>
<div class="main-wrapper">

<section class="second-content">
<p>hey this is just some random words i wrote here i dont know why but im gonna continue typing as i type ? okey im done for now</p>
<span class="button">E-Mail US!</span>
</section>



<section class="first-content col">
    <ul>
      <li>
        <a href="dust2.html"><img src="img/dust2.jpg" alt="Dust2"></a>
        <p>Dust 2</p>
      </li>
      <li>
        <a href="nuke.html"><img src="img/nuke.jpg" alt="Nuke"></a>
        <p>Nuke</p>
      </li>
      <li>
        <a href="aztec.html"><img src="img/aztec.jpg" alt="Aztec"></a>
        <p>Aztec</p>
      </li>
      <li>
        <a href="cache.html"><img src="img/cache.jpg" alt="Cache"></a>
        <p>Cache</p>
      </li>
      <li>
        <a href="mirage.html"><img src="img/mirage.jpg" alt="Mirage"></a>
        <p>Mirage</p>
      </li>
      <li>
        <a href="inferno.html"><img src="img/inferno.jpg" alt="Inferno"></a>
        <p>Inferno</p>
      </li>
      <li>
        <a href="cobblestone.html"><img src="img/cobblestone.jpg" alt="Cobblestone"></a>
        <p>Cobblestone</p>
      </li>
      <li>
        <a href="overpass.html"><img src="img/overpass.png" alt="Overpass"></a>
        <p>Overpass</p>
      </li>
      <li>
        <a href="train.html"><img src="img/train.jpg" alt="Train"></a>
        <p>Train</p>
      </li>
      <li>
        <a href="vertigo.html"><img src="img/vertigo.jpg" alt="Vertigo"></a>
        <p>Vertigo</p>
      </li>
    </ul>
</section>



<div class="push"></div>


<footer>
<p>&copy  2015, Tobbe and Erdrag all right reserved</p>
</footer>

</div>
</body>
</html>

4 Answers

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

You have 2 options:

  1. in your CSS file - separate the <br/> background: url('../img/texture-logo.png'), black; <br/> To:<br/>

    background-image: url('../img/texture-logo.png');
background-color:black;
backgruond-size:100%;

  2. use the HTML img src tag: <img src="img/texture-logo.png"/> and give it width of 100% like this: <img src="img/texture-logo.png" width="100%"/> or add a class with width:100%;

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

the width property only works when the site is in desktop size. when i resize the browser the header gets cut off

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

That's why I said you should separate it and use the <br/>

<br/>
That way it will be responsive means width:100% in all monitor sizes
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

i did like this

header {
  background: url('../img/texture-logo.png'), black;
  background-size: 100%;
  padding: 40px;
  margin-bottom: 200px;
  min-height: 100%;
  width: 100%;
}
Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

please notice what I've meant by saying separate: look at your background first line, and compare it to this:

header {
  background-image: url('../img/texture-logo.png');
  background-color:black;
  background-size: 100%;
  padding: 40px;
  margin-bottom: 200px;
  min-height: 100%;  
}
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

it still doesnt work when making the browser smaller hmm

// erdrag

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

You probably have something that overwrite it, make sure that in your other css that are included you don't have other width property that overwrite it. but regarding to the code that you have posted, it's working fine.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

I have a normalize css inleder is that a problem?

Maor Tzabari
Maor Tzabari
1,762 Points
Maor Tzabari
Maor Tzabari
1,762 Points

since I can't see your other included css files I would suggest to remove the css request line, one by one and see if it works for you, that way you can diagnose where the problem coming from