Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last month.
Improve this question
Screenshot of the problem
Hey,
I have a problem, there is a lot of blank space between the main section and the footer. How do I fix this?
I tried to add padding and margins but that didn't helped. I also looked it up on the internet of course, and I found out that every HTML and CSS is different, so that's the reason that I ask it again.
footer {
position: absolute;
width: 100%;
height: 30px;
background-color: lightblue;
}
html,
body {
overflow-x: hidden;
}
#media only screen and (max-width: 480px) {
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
}
.container {
position: relative;
display: flex;
align-items: center;
margin: 0;
}
.text-block {
position: relative;
bottom: 300px;
background-color: #ffffff;
opacity: 0.8;
color: blue;
padding-left: 20px;
padding-right: 20px;
display: block;
margin-left: auto;
margin-right: auto;
font-size: 20px;
text-align: center;
}
#footer-tekst {
position: relative;
top: 5px;
left: 8px;
}
#footer-link {
position: relative;
float: right;
margin-right: 20px;
bottom: 15px;
color: black;
}
```
<nav>
<img id="website-logo" src="logo-website.png" alt="Website logo">
<ul>
<li><a id="navigatie" class="active" href="Link home">Home</a></li>
<li><a id="navigatie" href="Link Over ons">Over ons</a></li>
<li><a id="navigatie" href="Link Contact">Contact</a></li>
</ul>
<ol>
<li><a id="navigatie" href="Link Account">Account</a></li>
<li><a class="button" id="doe-mee" href="Link Doe mee!">Doe mee!</a></li>
</ol>
</nav>
<main>
<img src="foto-homepagina.png" alt="Groep mensen die afval opruimen" class="center" />
<div id="tekst-homepagina" class="container">
<div class="text-block">
<h1>Schoon is cool: help mee om ons wereld een stukje beter te maken!</h1>
</div>
</main>
<aside>
</aside>
<footer>
<h3 id="footer-tekst">2023 © Colossal Recycle</h3>
<ul>
<li><a id="footer-link" href="Link algemene voorwaarden">Algemene voorwaarden</a></li>
<li><a id="footer-link" href="link privacy policy">Privacy policy</a></li>
</ul>
</footer>
Related
trying to do a responsive navbar and overflow hidden and been giving me issues wojdering what the problem is cause i dont think anything is wrong with my code.
instead of hiding my navbar when i take it out of the page and make it hidden it just leaves it there to overflow
heres my template code:
`
<template >
<div class="main">
<nav>
<img class="logo" src="../assets/shared/logo.svg" alt="">
<ul class="main-nav">
<li><img class="ham" src="../assets/shared/icon-hamburger.svg" alt="" #click="navbar"></li>
<li><img class="close" src="../assets/shared/icon-close.svg" alt=""></li>
<li> <ul class="navbar" ref="nav">
<li><RouterLink class="router-link home" to="/"><span class="number">01</span> Home</RouterLink></li>
<li><RouterLink class="router-link" to="/crews"><span class="number">02</span> Crews</RouterLink></li>
<li><RouterLink class="router-link" to="/destination"><span class="number">03</span> Destinations</RouterLink></li>
<li><RouterLink class="router-link" to="/technology"><span class="number">04</span> Technology</RouterLink></li>
</ul></li>
</ul>
</nav>
<div class="content">
<p class="first">SO, YOU WANT TO TRAVEL TO<br><span class="space">SPACE</span></p>
<p class="second">Let's face it; if you want to go to space, you might as wel genuinely go to outer space not hover kind of on the edge
of it. Well sit back, and relax because we'll give you a truly out of this world experience!</p>
<div class="explore">
<h1>EXPLORE</h1>
</div>
</div>
</div>
</template>
`
and heres my css:
`
.main {
background-image: url('../assets/home/background-home-mobile.jpg');
background-repeat: no-repeat;
background-size: cover;
width:100%;
height: 100vh;
color: white;
padding-top: 3rem;
padding-right: 2rem;
}
nav {
display: flex;
justify-content: space-between;
padding-left: 1rem;
padding-right: 1rem;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.navbar {
position: absolute;
height: 87.9vh;
width: 48vw;
padding: 7rem 0rem 0rem 1rem;
background-color: #003b59;
opacity: 0.8;
left: 100vw;
top: 5vh;
z-index: 3;
}
.router-link{
display: block;
margin-right: 3rem;
text-decoration: none;
color: rgb(225, 219, 219);
font-size: 20px;
font-weight: lighter;
padding-bottom: 1rem;
}
`
You need to remove the overflow-hidden class from the v-card that wraps the v-app-bar and v-sheet.
I believe my understanding of positioning is causing me multiple issues:
'Donate' in the navigation header keeps overflowing and not staying inline. I have experimented with display:inline-block, but it still is not working. I am trying to ensure that the navbar elements are responsive to different-sized pages and stay in the same line.
'Our work' section will not center in the middle of the page, even when I tried margin:auto
Unable to align the elements in the problem section correctly. I would like row2 to be 10% below row1, so it's like a 2x2 table configurement.
I've been struggling with this for a while, so if anyone has any ideas on how to solve any of these and suggestions moving forward - it would be well appreciated!
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#FFFFFF;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
}
.logo{
width:30%;
float: left;
text-align:left;
line-height: 122px;
}
nav{
float: center;
line-height: 122px;
}
nav a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 50%;
padding:10px;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%
}
.row2{
position: relative;
display: inline-block;
top:10%;
}
<body>
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%";>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section>
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the problem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
font-family: 'Ubuntu';
}
body {
font-family: 'Montserrat';
text-align: left;
padding-top: 122px;
}
/* Header */
header {
position: fixed;
width: 100%;
height: 122px;
background: #FFFFFF;
z-index: 1;
text-align: center;
top: 0;
}
.wrapper {
max-width: 90%;
margin: 0 auto;
}
.logo {
width: 200px;
float: left;
text-align: left;
line-height: 122px;
}
nav {
float: right;
line-height: 122px;
width: calc(100% - 200px);
text-align: right;
}
nav a {
font-family: 'Ubuntu';
font-weight: 500;
font-size: calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color: #616161;
padding: 20px 20px;
}
.links:hover {
background: #F3EA65;
}
.CTA {
padding: 15px 50px;
border: none;
background: #F28A31;
border-radius: 15px;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
main,
section {
float: left;
width: 100%;
}
/*Our work*/
.ourworksec {
background: #fff;
padding: 100px 25px;
}
#ourwork {
width: 100%;
max-width: 620px;
margin: 0 auto;
text-align: center;
}
/*Problem section */
h2#theproblem {
padding: 20px;
}
#problembackground {
width: 100%;
float: left;
padding: 100px 20px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent {
position: relative;
}
.row1 {
position: relative;
display: inline-block;
padding: 20px;
float: left;
width: 50%;
}
.row2 {
position: relative;
float: left;
margin-top: 50px;
padding: 20px;
width: 50%;
}
#media only screen and (max-width: 1200px) {
.logo {
width: 80px;
}
nav {
width: calc(100% - 80px);
}
nav a {
padding: 15px 10px;
}
.CTA {
padding: 15px 30px;
}
}
<header>
<div class="wrapper">
<div class="logo">
<a href="....">
<img src="Home.png" alt="Logo" width="25%" ;>
</a>
</div>
<nav>
<a class="links" href="#">about</a>
<a class="links" href="#">our team</a>
<a class="links" href="#">who we help</a>
<a class="links" href="#">get involved</a>
<a href="#">
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</nav>
</div>
</header>
<main>
<section class="ourworksec">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="theproblem">the problem</h2><br>
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</section>
</main>
Regarding this one you simply don't have enough space at certain window widths to display them all, so you need to make their sizes responsive. #media queries at certain widths is one option.
"Our work" is absolutely positioned, which messes with things like margin: 0 auto to center things. In general you use position: absolute WAY too often. Honestly you could avoid it all together looking at your page so far. position: absolute is a pain to work with when you come back to your project at a later stage too.
Here your problem is that the third element is still on the same line because you set display: inline-block. You could wrap both rows each in another div (which are display: block by default). Also work with margin-bottom here in my opinion. You are making it way harder with the way you use several position properties.
Here: I removed the floats and used flexbox and grid
Quick note: This website is not responsive, so pls open it in the full window not hte mini window. If you want a responsive site, dang man, that's a big request
Code:
<body>
<style>
*{
margin:0;
padding:0;
}
header{
font-family:'Ubuntu';
}
body{
font-family: 'Montserrat';
text-align: left;
}
/* Header */
header{
position: fixed;
width:100%;
height:122px;
background:#ffffff;
z-index:1;
}
.wrapper{
width:90%;
margin:0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.logo{
text-align:left;
line-height: 100px;
height: fit-content;
display: inline-block;
width: fit-content;
padding: 30px;
margin: 0px;
}
.logo image {
width: 200px;
height: 200px;
}
.wrapper a{
font-family:'Ubuntu';
font-weight: 500;
font-size:calc(50px+1vw);
line-height: calc(23px+1vw);
text-decoration: none;
letter-spacing: 4px;
color:#616161;
padding: 20px 20px;
}
.links:hover {
background:#F3EA65;
}
.CTA{
padding: 15px 100px;
border: none;
background: #F28A31 ;
border-radius: 15px ;
font-family: Ubuntu;
font-style: normal;
font-weight: bold;
line-height: calc(13px+1wv);
font-size: calc(20px+1vw);
color: #FFFFFF;
text-align: center;
letter-spacing: 0.5px;
display: inline-flex;
}
.CTA:hover {
background-color: #F3EA65;
color: #FFFFFF;
cursor: pointer;
}
/*Our work*/
#ourwork{
background:#fff;
position:absolute;
width: 932px;
height: 92px;
top: 700px;
left: 300px;
padding:10px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#work{
display: flex;
justify-content: center;
align-items: center ;
}
/*Problem section */
#problembackground{
position: absolute;
width: 100%;
height: 561px;
top:852px;
background: linear-gradient(90.14deg, #DE5135 -20.57%, #6975A7 88.83%);
}
#problemcontent{
position: relative;
top: 25%;
left:5%;
}
#the-problem{
margin: auto;
width: 300px;
}
.row1{
position: relative;
display: inline-block;
padding-right:10%;
margin: auto;
}
.row2{
position: relative;
display: inline-block;
top:10%;
margin: auto;
}
.problem{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
li{
list-style: none;
}
</style>
<header>
<ul class="wrapper">
<div class="logo">
<a href="....">
<img src="/logo.png" alt="Logo" width="25%";>
</a>
</div>
<li> <a class="links" href="#">about</a> </li>
<li> <a class="links" href="#">our team</a> </li>
<li> <a class="links" href="#">who we help</a> </li>
<li> <a class="links" href="#">get involved</a> </li>
<button class="CTA">Contact</button>
</a>
<a href="#">
<button class="CTA">Donate</button>
</a>
</ul>
</header>
<main>
<section id="work">
<div id="ourwork">
<h4>OUR WORK</h4><br>
<p id="largertext">
Youth Housing Project Association Inc. (YHP) provides supported, unsupervised,<br> medium-term accommodation in Brisbane to young people aged from 16-21 years old<br> who are homeless or at risk of homelessness.
</p>
</div>
</section>
<section>
<div id="problembackground">
<div id="problemcontent">
<h2 id="the-problem">the problem</h2><br>
<div class="problem">
<div id="p1" class="row1">
<h3>1 in 5</h3>
<p>young Australians report high levels of<br> psychological distress</p>
</div>
<div id="p2" class="row1">
<h3>28 000</h3>
<p>12 to 24-year olds are homeless on any given<br> night in Australia</p>
</div>
<div id="p3" class="row2">
<h3>1 in 6</h3>
<p>16 to 24-year olds live below the poverty line</p>
</div>
<div id="p4" class="row2">
<h3>35%</h3>
<p>of 16 to 24-year olds have experienced<br> domestic violence at home</p>
</div>
</div>
</div>
</div>
I'm making a discord server website for people to find discord servers to join and make friends but, I dont know why my web page has a horizontal scroll bar.
It also has a vertical scroll bar and it shouldn't have that yet
here is my HTML and CSS
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>OnTop Servers</title>
</head>
<body>
<nav class="topnav">
<div class="topnav-right">
<a class="active" href="index.html">Home</a>
Search
Servers
</div>
<h2 class="title">
OnTop Servers
</h2>
</nav>
<center>
<div class="welcome">
<div class="centered-text">
<div class="welcome-body-inner">
<h2 class="head">
DISCOVER
<span class="discord-logo">DISCORD</span>
SERVERS
</h2>
<h3 class="body">
Find amazing servers to interact with and make friends
</h3>
</div>
</div>
</div>
</center>
<footer>
<div class="container">
<div class="column">
<ul class="footer-links">
<li>
<a class="link-text" href="index.html" title="Home">
Home </a>
</li>
<li>
<a class="link-text" href="search.html" title="Search">
Search </a>
</li>
<li>
<a class="link-text" href="servers.html" title="Servers">
Servers </a>
</li>
<li>
<a class="link-text" href="https://discord.gg/" target="_blank">
Official Discord Server </a>
</li>
<li>
<a class="link-text" href="termsofservice.html" target="_blank">
Terms Of Service </a>
</li>
<li>
<a class="link-text" href="guidelines.html" target="_blank">
Guidelines </a>
</li>
</ul>
</div>
</div>
<div class="copyright">
<p class="copyright-text">© Copyright 2020 OnTop Servers</p>
</div>
</footer>
</body>
</html>
CSS:
.row::after {
clear: both;
display: table;
}
.copyright {
position: absolute;
bottom: 1%;
right: 1%;
font-size: 15px;
}
.copyright-text {
color: white;
}
.footer-links {
position: absolute;
bottom: 5%;
}
.link-text {
color: white;
text-decoration: none;
}
.container {
padding: 0;
margin: 0;
}
li {
list-style-type: none;
}
footer {
position: absolute;
bottom: 0%;
clear: both;
height: 200px;
width: 1920px;
color: #fff;
background: #2c2c2c;
}
.welcome {
margin-top: -2.5rem;
width: 100%;
height: 35.5rem;
line-height: 1.8em;
margin-bottom: .4em;
padding: 0;
font-family: Helvetica;
font-weight: 600;
font-size: 1.5em;
color: #ffff;
text-transform: uppercase;
}
.centered-text {
position: relative;
left: 24.5%;
display: flex;
align-items: center;
padding: 0 1.5rem;
}
.discord-logo {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
display: inline-block;
padding: .6em 0;
background: url(images/Discord-Wordmark-White.png) center no-repeat;
background-size: contain;
font-size: 1em;
}
.head {
margin-bottom: .4em;
padding: 0;
line-height: 1.4;
font-weight: 600;
font-size: 2em;
}
.body {
margin: 0 auto 1em;
text-transform: inherit;
opacity: 85%;
}
how do I fix this this problem it is really bugging me and I cant work out what the problem is?
It's this combination
position: relative;
left: 24.5%;
display: flex;
You've got a block level box, that's margin area is therefore as wide as its container, then it's shifted 24.5% of the width of its container to the right, making its right edge 124.5% from the container's left edge. That's always going to overflow the container horizontally.
I suggest using margin-left instead of left.
Below my Navigation Bar I have a picture that is covered by a gradient, which fades into the div below it. After this div I have a footer.
I am having a problem trying to embed a YouTube video over my picture div and my gradient div that will extend slightly over my main div.
Essentially, the div that holds my YouTube video needs to go on top of these divs and be positioned in the center of the screen (from left to right), and be responsive.
However, I can't seem to be successful in doing this and all of the tutorials on responsive YouTube videos isn't working.
Can anyone help me please? Thanks!
HTML Code:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<link href="images/favicon.ico" rel="icon" />
<title>Aduro Pictures</title>
</head>
<body>
<header>
<div id="logo_home">
<img id="logo" src="images/logo.jpg" alt="logo">
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a></li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a></li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a></li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a></li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a></li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a></li>
</ul>
</nav>
</header>
<div id="main_wrapper">
<div id="image_container"></div>
<div id="gradient"></div>
<div id="main_container"></div>
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<footer>
<p class="copyright">Copyright © 2016.</p>
</footer>
</body>
</html>
CSS Code:
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 17.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#main_wrapper {
height: 2000px;
width: 100%;
}
#image_container {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 580px;
background: url('../images/background5.jpg') no-repeat;
}
#gradient {
position: absolute;
top: 90px;
left: 0px;
width: 100%;
height: 580px;
background: transparent linear-gradient(to bottom, rgba(29, 29, 29, 0.65) 0px, #1D1D1D 100%) repeat scroll 0% 0%;
}
#main_container {
background-color: #1d1d1d;
height: 1420px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
top: 0px;
position: relative;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
margin: 0px;
padding: 0px;
}
Also, I've probably made some mistakes, or have positioned things incorrectly, in which case I apolgize ahead of time. I am new to HTML & CSS.
Thanks!
Simply add a position: absolute to your div#video_container: https://jsfiddle.net/1aa87g9b/
I'm really not sure that my title is correct english. Hehe. But fortunately I can explain my problem in pictures ;-)
My problem is this:
body {
font: calibri;
background-color: #2d2e29;
margin-left: 150px;
margin-right: 150px;
margin-bottom: 0px;
margin-top: 0px;
}
p {
margin: 0px;
}
nav {
position: fixed;
width: 100%;
height: 80px;
background-color: #FFFFFF;
opacity: 0.75;
top: 0;
left: 0;
margin-left: 150px;
margin-right: 150px;
}
nav ul {
float: right;
list-style-type: none;
padding: 0;
margin-top: 30px;
margin-right: 30%;
}
nav li {
display: inline;
}
nav a {
margin: 5px;
color: black;
}
nav a:hover {
color: #99cccc;
}
#Forside {
background-color: #3f5c93;
height: 800px;
}
#Mig {
background-color: #ccc2a6;
height: 800px;
}
#Faerdigheder {
background-color: #3f5c93;
height: 800px;
}
#Projekter {
background-color: #ccc2a6;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Kontakt {
background-color: #3f5c93;
height: 800px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#logo {
height: 100%;
width: 200px;
background: url("Logo.png");
margin-top: 10px;
margin-left: 50px;
background-repeat: no-repeat;
position: absolute;
background-size: 200px;
}
<div id="all">
<nav>
<!-- navigations-element (menu) -->
<div id="logo"></div>
<ul>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Forside">
Forside
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Mig">
Mig
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Faerdigheder">
Færdigheder
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Projekter">
Projekter
</a>
</li>
<li>
<!-- internt link: relativ URL -->
<a class="nav" href="#Kontakt">
Kontakt
</a>
</li>
</ul>
</nav>
<div id="Forside">
<br>
<br>
<br>
<br>
<br>Forside
</div>
<div id="Mig">
<br>
<br>
<br>
<br>
<br>
<div class="meleft">
<h1>Mig</h1>
<p class="textleft">Lots of words
</p>
</div>
<div class="meright">
<img src="sdp.png" alt="sdp" id="sdp1" />
</div>
</div>
<div id="Faerdigheder">
<br>
<br>
<br>
<br>
<br>
<div class="skillsleft">
<img src="Collage1.png" alt="Collage" id="Collage" />
</div>
<div class="skillsright">
<h1>Færdigheder</h1>
<p class="textright">Lots of words
</p>
</div>
</div>
</div>
I added my code to fiddle, so you can see the problem:
http://jsfiddle.net/9Lj6ck3L/
I hope you can understand the code even though some words is in Danish :-)
Given the HTML and CSS provided, set the width of the nav to calc(100% - 300px);
Demo Fiddle
Otherwise you are telling it to be the full viewport width, offset from the left by 150px which is why it seems to overspill to the right. Using calc you can say, "fine, stretch to the viewport width, but minus the margins"
Working fiddle - http://jsfiddle.net/9Lj6ck3L/11/
Changed width of your header bar.
nav {
position:fixed;
width:63.5%;
height:80px;
background-color:#FFFFFF;
opacity:0.75;
top:0;
left:0;
margin-left:150px;
margin-right:150px;
}
Hope this helps.
Your problem is position:fixed. This element does not inherit anything from it's parent in terms of width.
Your best bet would be to wrap the nav in another <div> and make that position fixed. Then give the <nav> inside it the width that you want.
Move the <nav> outside of the #all div and put your margins on #all instead of the body.
Then give your <nav> css of box-sizing: content-box or box-sizing: padding-box to solve the width issue.