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 get cut off, and main-wrapper wierd centering

Hello, on my site my header gets cut off at desktop view and when i narrow the browser down, it still get cut off until 1400px, heres a codepen of it http://codepen.io/anon/pen/OPjrKa

as you can see the header gets cut off, and as you narrow the screen the main-wrapper gets wierd centering, (at dekstop view its centered, but when smaller browser its not)

heres the code for css

body {
    background: black;
    font-family: 'Oswald', sans-serif;
    color: #fff;
    margin: 0;
    width: 100%;
}

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

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: 3px;
    font-size: 20px;
    font-family: 'Exo 2', sans-serif;
}


.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 {
    position: relative;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5px;
    border: 2px solid black;
    border-radius: 20px;
    background-color: #FF6600;
    text-align: center;
    margin-bottom: 2px;
    top: -6px;
}

.button {
    font-weight: bold;
}

.button:hover {
   background-color: #FF6633;
}

span {
    letter-spacing: 4px;
}

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <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'>
    <link href='http://fonts.googleapis.com/css?family=Exo+2:900' rel='stylesheet' type='text/css'>
<title>CS:GO tips/tricks</title>
</head>
<body>
    <header class="main-header group">
        <img class="main-logo" src="http://placehold.it/350x150">
    </header>
<div class="main-wrapper">

<section class="second-content">
<p>hey this is just some random text im typing here i dont know why but i do it anyway okey okey oeky okey hehe
  wath</p>

<span class="button">E-Mail US!</span>
</section>



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



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


<footer>
<p>&copy;  2015, Empyreal and Erdrag all right reserved.</p>
</footer>

</div>
</body>
</html>
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

And my site is supposed to have everything fixed, so its not responsible, but when i narrow down the browser, my wrapper div follows along to the left, but everything else is still intact

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

You've got to understand when you putting this code on codepen:

<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css">

it's not really loading to the page, because the website doesn't find the css/main.css path because it was only on your computer, so far the way you see your website isn't they way you'll look on the codepen of your code.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

okey, but on codepen you can see how it looks at the header

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

Is your main.css code inside of the CSS panel of the codepen?

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

yes it is, but the normalize isnt

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

Let me know how you want your header to react, and I will help you with your code, I just don't understand what exactly you need since you are loading 2 images in the header... I see you have background-image for the header and you also have image inside of your header HTML tags.

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

the headers background is black, and i have an image in the header, that is supposed to be the logo, my website is fixed so when i rezise the browser all the things stay put except the header, at desktop view it has a small cut, and when i rezise it it span the browser size, but when i scroll to the right to see all the content on the page it has a cut, because it only was spaning the browser window at small screen, and not across the whole page that is fixed

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

I hope i understand what you mean, is this code helpful?

HTML:

<header>
  <img src="https://stormideaswus.blob.core.windows.net/headerjunction/2014/91/ebfd4903-8a3d-480a-8111-62d77f6b1331.jpg" alt="" />
</header>

CSS:

header { background:#000; height: 200px; }
header img { width: 100%; height: 200px;}
erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

Still doesnt work, heres some images on how it looks when the browser is at the smallest size http://imgur.com/o8HvDd5

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

Is there a link for your website? or Is there a way you can attached your source files, that way I can definitely diagnose the problem

erdragerdragsson
erdragerdragsson
Courses Plus Student 5,887 Points

no sorry, the closest is codepen :/