HTML5/css probleem met responsive

**J. Haan** · 13-07-2019, 18:30

Ben bezig met HTML5/css maar krijg wat vreemde resultaten, de header staat goed bij websites breder dan 780 pixels, daar beneden gaat de header opeens naar rechtsboven omdat daar ruimte ontstaat. Wie kan hier naar kijken? Is waarschijnlijk iets heel kleins, maar ik zie het niet.
(code werkt goed op een andere website, maar daar zit een menubalk extra bij. Als ik die weghaal ontstaat het probleem. Ik zie alleen niet wat het probleem veroorzaakt.)

Code van de index:

<!DOCTYPE html>
<html lang="nl">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="master.css">
<link rel="stylesheet" href="master-responsive.css">

<body>
<div id="bg">
<img src="images/background-image.jpg" alt="background-image">
</div>
<div id="container">

<header>
<div id="logo"><img src="images/logo.jpg" alt="alt">
<span id="slogan"><span id="slogan a"><a href="link.php">link</a> - <a href="contact.php">Contact</a> - <a href="taal.php">taalkeuze</a></span></span></div>

<nav>
<ul>
<li>.</li>
</ul>
</nav>
</header>

<section id="portfolio">
<div class="w3-content w3-section" style="max-width:980px">
<img src="images/la1.gif" style="width:100%">
</div>
</section>

<div class="clear:after">
<main>
<p>tekst<HR></p>
</main>
<footer>© 2019</footer>

CSS:
@import url(https://fonts.googleapis.com/css?fam...:300,400,700);
* {
margin: 0;
padding: 0;
list-style: none;
}
html {
height: 100%;
overflow-y: scroll;
}
#bg {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
#bg img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
body {
height: 100%;
background: #fafafa;
font-family: Abel;
font-size: 16px;
color: #333333;
font-weight: 300;
}
a {
color: #A17633;
}
a:hover {
text-decoration: none;
}
h1 {
margin: 0 0 12px;
font-size: 20px;
font-weight: 400;
color: #000;
}
h2 {
margin: 0 0 12px;
font-size: 18px;
font-weight: 400;
color: #A17633;
}
h3 {
margin: 0 0 12px;
font-size: 15px;
font-weight: 400;
color: #A17633;
}
p {
line-height: 22px;
margin: 0 0 20px;
}
header {
position: relative;
background: #fff;
}
#logo {
float: left;
width: 100%;
padding: 10px 0 0 10px;
}
#slogan {
float: right;
padding: 20px 10px;
}
#slogan a {
padding: 30px 20px;
font-size: 16px;
font-weight: 300;
color: #000;
text-decoration: none;
}

#portfolio {
overflow: hidden;
height: auto;
border-bottom: 2px solid #000;
}
#portfolio img {
width: 100%;
}

.clear:after {
content: "";
clear: both;
display: block;
}
#container {
margin: 0 auto;
width: 1200px;
background: #fff;
min-height: 100%;
-webkit-box-shadow: 0 0 3px 0 rgba(0,0,0,0.15);
box-shadow: 0 0 3px 0 rgba(0,0,0,0.15);
position: relative;
}

.content {
padding-bottom: 30px;
}
main {
float: left;
width: 100%;
box-sizing: border-box;
padding: 15px;
}

main img {
max-width: 100%;
height: auto;
padding: 0 5px 0 5px;
border: 0px;
}

footer {
padding: 10px;
text-align: right;
position: absolute;
bottom: 0;
color: #aaaaaa;
left: 15px;
right: 15px;
}

CSS voor responsive:
@media screen and (max-width: 2400px) {
#container {
width: 980px;
}
#portfolio img {
width: 100%;
}

@media screen and (max-width: 1023px) {
#container {
width: auto;
}
#slogan {
float: right;
}
}

@media screen and (max-width: 900px) {
main {
float: none;
padding: 10px;
width: auto;
}
}
@media screen and (max-width: 767px) {
#logo {
width: 80%;
padding: 10px 0 0 10px;
}
#slogan {
float: left;
}
footer {
font-size: 12px;
text-align: center;
}

}

**J. Haan** · 13-07-2019, 21:13

Probleem opgelost, zat in het CSS in de regel: #portfolio - overflow: hidden;
Als ik die regel eruit haal gaat het goed.

HTML5/css probleem met responsive