I want the 'William Marchesi' and 'Contact' Text centered vertically with the 'Contact' Button on the right of the header. When I try a float: right, the contact text moves so that it is higher than the 'William Marchesi' text.
html {
height: 100%;
background-repeat: no-repeat;
background-color: green;
}
body {
font-size: 87.5%;
/* Base font size on 14px */
font-family: sans-serif;
line-height: 1.5;
text-align: justify;
margin: 0 auto;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
.header div {
margin: 0 auto;
width: 70%;
clear: both;
padding: 0;
}
.header {
background-color: #FCFCFC;
width: 100%;
padding: 0;
margin: 0 auto;
/*height: 5em;*/
}
.heading,
.contactButton {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
line-height: 3em;
height: 3em;
font-family: 'Nunito', sans-serif;
}
.heading {
font-size: 3em;
padding: 0;
margin: 0;
}
.contactButton {
font-size: 2em;
text-align: right;
padding: 0;
margin: 0;
float: right;
}
<body class="body">
<div class="header">
<div>
<h1 class="heading">William Marchesi</h1>
<a class="contactButton" href="#contact">Contact</a>
</div>
</div>
</body>
Here's one of many possible solutions, using position:absolute on the contact button.
html {
height: 100%;
background-repeat: no-repeat;
background-color: green;
}
body {
font-size: 87.5%; /* Base font size on 14px */
font-family: sans-serif;
line-height: 1.5;
text-align: justify;
margin: 0 auto;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
.header div {
margin: 0 auto;
padding: 0;
text-align:center;
}
.header {
background-color: #FCFCFC;
padding: 0;
}
.heading, .contactButton {
padding: 0;
margin: 0;
vertical-align: middle;
line-height: 3em;
font-family: 'Nunito', sans-serif;
}
.heading {
font-size: 3em;
padding: 0;
margin: 0;
}
.contactButton {
font-size: 2em;
text-align: right;
padding: 0;
margin: 0;
position:absolute;
top:0.8em;
right:1em;
}
<div class="header">
<div>
<h1 class="heading">William Marchesi</h1>
<a class="contactButton" href="#contact">Contact</a>
</div>
</div>
You can use margin-left instead of float
html {
height: 100%;
background-repeat: no-repeat;
background-color: green;
}
body {
font-size: 87.5%; /* Base font size on 14px */
font-family: sans-serif;
line-height: 1.5;
text-align: justify;
margin: 0 auto;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
.header div {
margin: 0 auto;
width: 70%;
clear: both;
padding: 0;
}
.header {
background-color: #FCFCFC;
width:100%;
padding: 0;
margin: 0 auto;
/*height: 5em;*/
}
.heading, .contactButton {
display: inline-block;
padding: 0;
margin: 0;
vertical-align: middle;
line-height: 3em;
height: 3em;
font-family: 'Nunito', sans-serif;
}
.heading {
font-size: 3em;
padding: 0;
margin: 0;
}
.contactButton {
font-size: 2em;
text-align: right;
padding: 0;
margin-left: 59%;
}
Here's a flexbox solution that makes centering simple and easy:
body {
background-color: green;
font-size: 87.5%;
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-around; /* horizontal alignment of children */
align-items: center; /* vertical alignment of children */
height: 6rem;
background-color: #FCFCFC;
}
.heading {
font-size: 3em;
font-family: 'Nunito', sans-serif;
}
.contactButton {
font-size: 2em;
font-family: 'Nunito', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
<body class="body">
<div class="header">
<h1 class="heading">William Marchesi</h1>
<a class="contactButton" href="#contact">Contact</a>
</div>
</body>
jsFiddle
More about flex centering here:
How to Center Elements Vertically and Horizontally in Flexbox
Center and right align flexbox elements
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
You can do this using flexbox (display: flex) quite easily.
Try my jsFiddle.
Related
I'm coding a webpage using CSS and PHP. Whenever I add a new element it's pushed down to the bottom of the page. I thought it was a one time thing only affecting a paragraph so I added negative margins for it (not great practice, I know), but every element I add is getting pushed to the end of the page and I have to scroll to find it.
The paragraph below was the part getting pushed down, the login heading remained at the top, but when I tried adding more text after, it got pushed down as well.
#import url('https://fonts.googleapis.com/css2?family=Urbanist:wght#500&display=swap');
* {
width: 100%;
height: 100%;
}
h1 {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 30px;
line-height: 0px;
margin-bottom: 0px;
}
p {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 20px;
line-height: 0px;
margin-top: -740; //I added negative margins because this element was being pushed downwards and that solved it, but I don't want to have to do it with every new element.
}
body {
padding: 0;
margin: 0;
}
header {
height: 60px;
background-color: #1e3799;
}
ul {
float: right;
right: 30%;
}
ul li {
display: inline;
list-syle: none;
}
ul li a {
text-decoration: none;
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 18px;
padding: 0px 0px 0px 20px;
}
footer {
position: absolute;
bottom: 0%;
width: 100%;
height: 60px;
background-color: #1e3799;
text-align: center;
margin: 0 auto;
}
footer p {
color: white;
font-family: 'Urbanist', sans-serif;
}
body {
background-color: #4a69bd;
}
<h1>Log In</h1>
<p> No Account?<a href="register.php">Register here!</p>
Don't use width and height 100% for *.
This * means use it every element on
p {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 20px;
line-height: 0px;
margin-top: -740; /* You forgot to add 'px' here */
}
Change this to these to full page with preserving background color.
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
You also forgot to close <p> No Account?Register here!</p> tag.
I don't suggest you use this if you don't know what you are doing line-height: 0px;
Here is complete fixed code. I aligned some items because the way of coding I thought you want to center footer items.
* {
padding: 0;
margin: 0;
}
h1 {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 30px;
/* line-height: 0px; */
margin-bottom: 0px;
}
p {
color: white;
font-family: 'Urbanist', sans-serif;
font-size: 20px;
/* line-height: 0px; */
/* margin-top: -740; */
/* You forgot to add 'px' here */
}
body {
background-color: #4a69bd;
width: 100%;
height: 100%;
}
footer {
position: absolute;
bottom: 0%;
width: 100%;
height: 60px;
background-color: #1e3799;
}
footer, p {
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: 'Urbanist', sans-serif;
}
a {
margin-left: 10px;
color: white;
}
<h1>Log In</h1>
<footer>
<p> No Account?Register here!</p>
</footer>
It may be because you have given all (*) a height of 100% in your css
I want to get Div with background colored and put #title aligned to left and <nav> aligned to left and both of them in one line.
I couldn't get them into one line! And I couldn't give #Header background-color.
/* Reset */
html, body, div, h1, h2, h3, a, p, img, ul, li, footer, fieldset, form, label, header, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.page {
background-color: #fff;
}
#banner {
padding: 8em 0 5em 0;
height: 75vh;
background-image: url(images/banner1.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
text-align: center;
position: relative;
}
#semiopacity {
background-color: rgba(20, 15, 10, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
a {
margin: 0 0 2em 0;
font-weight: 700;
font-size: 20px;
color: #fff;
text-decoration: none;
font-family: Lato, serif;
}
p {
margin: 0 0 2em 0;
font-weight: 700;
font-size: 20px;
color: #fff;
}
h1,
h2,
h3 {
font-weight: 700;
line-height: 1.5;
margin: 0 0 1em 0;
font-family: Lato, serif;
color: #fff;
}
h1 {
margin-top: 6em;
font-size: 2em;
text-align: center;
}
h2 {
margin-bottom: 2em;
text-align: center;
font-size: 1.5em;
}
#header {
padding: 1em 0 2em 0;
background: #e6e6e6;
}
nav {
margin: 0;
padding: 0;
text-align: right;
}
#title {
font-size: 1.3em;
margin: 1em 1em 0 0;
text-align: left;
margin: 0;
}
#main {
font-size: 1.3em;
margin: 1em 2em 0 0;
}
#lang {
font-size: 1.3em;
margin: 1em 1em 0 0;
}
<title>KAZAKHSTAN — world's large center of travel</title>
<meta charset="utf-8">
<div class="page">
<section id="banner">
<section id="semiopacity">
<div id="Header">
KAZAKHSTAN
<nav>
<ol>
<tr>MAIN</tr>
<tr>CONTACT</tr>
</ol>
</nav>
</div>
<h1>KAZAKHSTAN</h1>
<p>KAZAKHSTAN — WORLD'S LARGE CENTER OF TRAVEL.</p>
</section>
</section>
<section id="description">
</section>
</div>
I tried to fix it:
/* Reset */
html, body, div, h1, h2, h3, a, p, img, ul, li, footer, fieldset, form, label, header, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.page {
background-color: #fff;
}
#banner {
padding: 8em 0 5em 0;
height: 75vh;
background-image: url(images/banner1.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
text-align: center;
position: relative;
}
#semiopacity {
background-color: rgba(20, 15, 10, 0.7);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
a {
margin: 0 0 2em 0;
font-weight: 700;
font-size: 20px;
color: #fff;
text-decoration: none;
font-family: Lato, serif;
}
p {
margin: 0 0 2em 0;
font-weight: 700;
font-size: 20px;
color: #fff;
}
h1,
h2,
h3 {
font-weight: 700;
line-height: 1.5;
margin: 0 0 1em 0;
font-family: Lato, serif;
color: #fff;
}
h1 {
margin-top: 6em;
font-size: 2em;
text-align: center;
}
h2 {
margin-bottom: 2em;
text-align: center;
font-size: 1.5em;
}
#header {
padding: 1em 0 5em 0;
background-color: rgba(20, 15, 10, 0.7);
}
#nav {
margin: 0;
padding: 0;
text-align: right;
float: left;
}
#title {
font-size: 1.3em;
margin: 0;
}
#main {
font-size: 1.3em;
margin: 1em 2em 0 0;
}
#lang {
font-size: 1.3em;
margin: 1em 1em 0 0;
}
#buttons {
font-size: 1.3em;
margin: 1em 1em 0 0;
text-align: left;
margin: 0;
float: left;
}
<title>KAZAKHSTAN — world's large center of travel</title>
<meta charset="utf-8">
<div class="page">
<section id="banner">
<section id="semiopacity">
<div id="Header">
<div id="nav">
<ol>
<tr><a id="title" href="#">KAZAKHSTAN</a></tr>
<tr>MAIN</tr>
<tr>CONTACT</tr>
</ol>
</div>
</div>
<h1>KAZAKHSTAN</h1>
<p>KAZAKHSTAN — WORLD'S LARGE CENTER OF TRAVEL.</p>
</section>
</section>
<section id="description">
</section>
</div>
I want to left align text in a drop-down menu but I'm having some problems. I have this HTML
<nav>
<a>Vote</a>
<a>Search</a>
<a>About</a>
</nav>
and this CSS for the drop down menu
nav {
display: none;
width: 30rem;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: left;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
}
But as you can see, when you click the menu icon the text isn't even visible. Interestingly, when I change:
text-align: left;
to
text-align: center;
I can see the text again, but it is not aligned where i want it. How do I left align my text and keep it visible?
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
style* {
margin: 0 auto;
font-family: sans-serif;
}
body {
margin: 0 auto;
font-family: Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
header {
width: 100%;
background-color: orange;
text-align: center;
position: relative;
}
#pageTitle {
display: flex;
padding: 10px;
}
#pageTitle h2 {
justify-content: center;
/* align horizontal */
align-items: center;
width: 95%;
}
.menu-btn {
position: absolute;
display: inline-block;
cursor: pointer;
}
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
nav {
display: none;
width: 30rem;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: left;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="pageTitle">
<h2>Page Title</h2>
<div class="mobile-nav">
<button class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</button>
<nav>
<a>Vote</a>
<a>Search</a>
<a>About</a>
</nav>
</div>
</div>
</header>
The problem comes from the rem unit you are using when giving width to your nav. You should use vw viewport width. This is relative from the screen width going from 0 to 100 turning the viewport width into a percentage.
Hope this helps
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
style* {
margin: 0 auto;
font-family: sans-serif;
}
body {
margin: 0 auto;
font-family: Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
header {
width: 100%;
background-color: orange;
text-align: center;
position: relative;
}
#pageTitle {
display: flex;
padding: 10px;
}
#pageTitle h2 {
justify-content: center;
/* align horizontal */
align-items: center;
width: 95%;
}
.menu-btn {
position: absolute;
display: inline-block;
cursor: pointer;
}
.menu-btn div {
position: absolute;
left: 100%;
top: 0%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
nav {
display: none;
width: 100vw;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: left;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 1.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div id="pageTitle">
<h2>Page Title</h2>
<div class="mobile-nav">
<button class="menu-btn" id="menu-btn">
<div></div>
<span></span>
<span></span>
<span></span>
</button>
<nav>
<a>Vote</a>
<a>Search</a>
<a>About</a>
</nav>
</div>
</div>
</header>
As others have pointed out already, the text is actually aligned left, but your screen size might prevent it from showing up due to the big width of your menu.
Try changing the width of your nav element to something relative to the page width, like 80%:
nav {
display: none;
width: 80%;
padding: 0rem;
background-color: red;
position: absolute;
right: 0%;
top: 100%;
text-align: left;
}
https://jsfiddle.net/1y8n08aq/1/
I am stuck with an extra close curry bracket in CSS that I accidentally put prior writing other lines. If I leave it there, it acually does no harm to the result. However, when I remove it, the position of other elements are repositioned.
(( In lines of code, the extra close curly bracket is where the arrow pointing ))
Please click on the links below to see both results.
Question: Is there any way to remove it without repositioning other elements?
Without the Close Curly Bracket
With the Close Curly Bracket
body{
font: 15px/1.5 Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
p(color#282f38);
background-color: #F5F2ED;
font:696863;
}
/*Global*/
.container{
width:80%;
margin:auto;
overflow:hidden;
}
ul{
margin:0;
padding:0;
}
/* Header */
#fixed{
position: fixed;
}
header{
position: fixed;
width: 100%;
background:#282f38;
color:#F5F2ED;
padding-top: 10px;
min-height:50px;
border-bottom:#F5F2ED 3px solid;
}
header a{
color:#F5F2ED;
text-decoration:none;
text-transform:uppercase;
font-size: 18px;
}
header li{
float:left;
display: inline;
padding: 0 20px 0 20px;
}
header #resume{
float: left;
}
header #resume h1{
margin: 0;
padding: 0;
}
header nav{
position: relative;
left: 30%;
float: right;
margin-top: 10px;
}
header .highlight, header .current a{
color:#696863 ;
font-weight: bold;
}
header a:hover{
color:#696863;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 350px;
background: url('../Resources/Photographer.png') no-repeat 0 -120px;
align-items: center;
color: #ffffff;
overflow: auto;
}
#showcase h1{
text-align: center;
margin-top: 100px;
font-size: 40px;
margin-bottom: 10px;
}
#showcase p{
text-align:justify;
margin:0;
padding:0;
font-size: 14;
text-indent: inherit;
}
/* Social Medias*/
#socialmedias{
position:fixed;
padding-top: : 5px;
right: 20px;
top: 130px;
display: block;
vertical-align: baseline;
font: inherit;
list-style-type: none;
}
} <<-----------------------------------------------------------------------
/* Message Me Box */
#box{
width: 30%;
overflow: hidden;
padding: 1px;
}
/* Box Border */
.fieldset{
display: inline-block;
border: 3px solid;
float: right;
}
/* Message Me Title */
#legend{
font-size: 20px;
font-weight: bold;
color:#282f38;
}
/* Name Input */
#form-name{
display: block;
width: 200px;
margin-bottom: 10px;
}
/* Email Input */
#form-email{
display: block;
width: 200px;
margin-bottom: 10px;
}
/* Message Input */
#form-message{
display: block;
margin-bottom: 10px;
}
/* Contact */
.button_contact{
position: relative;
height: 30px;
width: 100%;
background:#696863;
color: #F5F2ED;
font-size: 14px;
text-transform: uppercase;
border: 0;
}
The extra curly bracket is being treated as part of the selector for the next rule. i.e. the rule is
} #box {
width: 30%;
overflow: hidden;
padding: 1px;
}
So } #box matches nothing. When you remove the }, the selector is #box and matches the element with id "box".
If you don't want the effect you get when removing the extra }, remove the entire rule.
Not just one error,
Check the comments I added in your code.
Best way to avoid these errors are using an IDE.
There are so many open source tools available. For example NetBeans.
They can help you to identify your errors.
Check this screenshot, they are easy to use also.
/* Social Medias*/
#socialmedias{
position:fixed;
padding-top: : 5px; // Error 1,
right: 20px;
top: 130px;
display: block;
vertical-align: baseline;
font: inherit;
list-style-type: none;
}
} // Error 2
body{
font: 15px/1.5 Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
p(color#282f38); // Error 3
background-color: #F5F2ED;
font:696863;
}
You have many errors in your css. I've validated your css on W3C CSS Validator
I've changed your CSS. See below:
body {
font: 15px/1.5 Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
background-color: #F5F2ED;
}
p {
color: #282f38;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* Header */
#fixed {
position: fixed;
}
header {
position: fixed;
width: 100%;
background: #282f38;
color: #F5F2ED;
padding-top: 10px;
min-height: 50px;
border-bottom: #F5F2ED 3px solid;
}
header a {
color: #F5F2ED;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #resume {
float: left;
}
header #resume h1 {
margin: 0;
padding: 0;
}
header nav {
position: relative;
left: 30%;
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #696863;
font-weight: bold;
}
header a:hover {
color: #696863;
font-weight: bold;
}
/* Showcase */
#showcase {
min-height: 350px;
background: url('../Resources/Photographer.png') no-repeat 0 -120px;
align-items: center;
color: #ffffff;
overflow: auto;
}
#showcase h1 {
text-align: center;
margin-top: 100px;
font-size: 40px;
margin-bottom: 10px;
}
#showcase p {
text-align: justify;
margin: 0;
padding: 0;
font-size: 14px;
text-indent: inherit;
}
/* Social Medias*/
#socialmedias {
position: fixed;
padding-top: 5px;
right: 20px;
top: 130px;
display: block;
vertical-align: baseline;
font: inherit;
list-style-type: none;
}
/* Message Me Box */
#box {
width: 30%;
overflow: hidden;
padding: 1px;
}
/* Box Border */
.fieldset {
display: inline-block;
border: 3px solid;
float: right;
}
/* Message Me Title */
#legend {
font-size: 20px;
font-weight: bold;
color: #282f38;
}
/* Name Input */
#form-name {
display: block;
width: 200px;
margin-bottom: 10px;
}
/* Email Input */
#form-email {
display: block;
width: 200px;
margin-bottom: 10px;
}
/* Message Input */
#form-message {
display: block;
margin-bottom: 10px;
}
/* Contact */
.button_contact {
position: relative;
height: 30px;
width: 100%;
background: #696863;
color: #F5F2ED;
font-size: 14px;
text-transform: uppercase;
border: 0;
}
/* Header */
----------------->#fixed{<------------------
position: fixed;
}
Try to change the id where the arrow is pointed, use class for that, because there are so many conflicts, if we use IDs directly. For more information please find the link below:
https://github.com/CSSLint/csslint/wiki/disallow-ids-in-selectors
i think there is something to do with "#fixed" id name in the html and css.
try to change the name to something else. The property and your name might be colliding with each other. So change it...
I am trying to figure out this gap in between the nav and the "home" image. Every time I try with any margin-top: -15px the div class="inner" jumps to the far right of the image.
I'm still learning so I'm assuming its something pretty simple that I'm overlooking or have added too much junk code. This is also my 1st post on here so I'm hoping it all comes out correctly.
/**************************
GENERAL
**************************/
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
background-color: #fff;
}
img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
color: #4E4E4E;
}
h1 {
color: #4E4E4E;
font: normal 50px 'oswald', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
color: #4E4E4E;
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
h3 {
color: #4E4E4E;
margin: 0 0 1em 0;
color: #384047;
}
#wrapper {
position: relative;
width: 100%;
background: #fff;
}
/**************************
NAVIGATION
**************************/
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 60px;
width: 100%;
background: #fff;
font-size: 13pt;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
position: relative;
padding-top: 10px;
border-bottom: solid 1px #666;
z-index: 999;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 625px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #4E4E4E;
display: inline-block;
width: 125px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
color: #77308f;
}
nav a#pull {
display: none;
}
/**************************
HOME | SLIDES | SPLASH
**************************/
#slides {
max-width: 100%;
height: 1122px;
background: url('http://greytprints.com/images/home_bg.jpg') no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
z-index: -2;
}
#slides .inner {
position: relative;
top: 60%;
text-align: center;
width: 100%;
text-shadow: 0 0 2px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.4);
}
#slides .inner h1 {
color: #fff;
font-weight: 600;
font-size: 60px;
text-transform: uppercase;
letter-spacing: 1px;
}
#slides .inner h2 {
color: #fff;
font-weight: 400;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 1px;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 2000px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
<nav class="clearfix">
<ul class="clearfix">
<li>Newsletter</li>
<li>Store</li>
<li id="hide_logo"><img src="images/gp_logo_color.png" width="55" height="55"></li>
<li>About Us</li>
<li>Connect</li>
</ul>
Menu
</nav>
<div id="wrapper">
<div id="slides" name="home">
<div class="inner">
<h1>WE ARE GREYT PRINTS</h1>
<br>
<span><h2>AND WE LOVE GREYHOUNDS</h2></span>
</div>
</div>
</div>
The problem is margin collapse, because inside #wrapper there is a <h1> with some margin-top.
In this case, you can fix it using absolute positioning instead of relative one. This way .inner (including <h1>) will be removed from the normal flow of the document, so the margin won't affect #wrapper.
#slides .inner {
position: absolute;
}
/**************************
GENERAL
**************************/
body {
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
background-color: #fff;
}
img {
max-width: 100%;
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
color: #4E4E4E;
}
h1 {
color: #4E4E4E;
font: normal 50px 'oswald', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
color: #4E4E4E;
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
h3 {
color: #4E4E4E;
margin: 0 0 1em 0;
color: #384047;
}
#wrapper {
position: relative;
width: 100%;
background: #fff;
}
/**************************
NAVIGATION
**************************/
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Basic Styles */
nav {
height: 60px;
width: 100%;
background: #fff;
font-size: 13pt;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
position: relative;
padding-top: 10px;
border-bottom: solid 1px #666;
z-index: 999;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 625px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #4E4E4E;
display: inline-block;
width: 125px;
text-align: center;
text-decoration: none;
line-height: 40px;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
color: #77308f;
}
nav a#pull {
display: none;
}
/**************************
HOME | SLIDES | SPLASH
**************************/
#slides {
max-width: 100%;
height: 1122px;
background: url('http://greytprints.com/images/home_bg.jpg') no-repeat top center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
display: block;
z-index: -2;
}
#slides .inner {
position: absolute;
top: 60%;
text-align: center;
width: 100%;
text-shadow: 0 0 2px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.4);
}
#slides .inner h1 {
color: #fff;
font-weight: 600;
font-size: 60px;
text-transform: uppercase;
letter-spacing: 1px;
}
#slides .inner h2 {
color: #fff;
font-weight: 400;
font-size: 40px;
text-transform: uppercase;
letter-spacing: 1px;
}
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 2000px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
<nav class="clearfix">
<ul class="clearfix">
<li>Newsletter</li>
<li>Store</li>
<li id="hide_logo"><img src="images/gp_logo_color.png" width="55" height="55"></li>
<li>About Us</li>
<li>Connect</li>
</ul>
Menu
</nav>
<div id="wrapper">
<div id="slides" name="home">
<div class="inner">
<h1>WE ARE GREYT PRINTS</h1>
<br>
<span><h2>AND WE LOVE GREYHOUNDS</h2></span>
</div>
</div>
</div>