ChiroX ChiroX - 5 months ago 18
CSS Question

CSS | Body doesnt fit to Header

it's me again...
with another issue...

My Problem is that the Body is going above the Header, but it should be in a straight row.
It's starting from the left, but it should start where the Navigationbar starts and the other 2 Div's should end where the Navigationbar end.

CodePen



body {
background: black;
font-family: Oswald;
font-size: 20px;
font-weight: normal;
line-height: 1;
margin: 0;
min-width: 960px;
padding: 0;
}
a {
text-decoration: none;
outline: none;
}
a:active {
background: none;
}
img {
border: none;
}
/*-------------------------------------------Header-------------------------------------------*/
h1 {
text-align: left;
font-family: Oswald DemiBold;
font-size: 24px;
color: #A40900;
text-transform: uppercase;
}
h2 {
text-align: left;
font-family: Oswald DemiBold;
font-size: 24px;
color: white;
text-transform: uppercase;
}
p {
color: #252525;
line-height: 20px;
margin: 0;
padding: 0;
text-align: left;
}
p a {
color: #252525;
text-decoration: underline;
}
.border-right {
border-right: 5px solid #A40900;
padding-right: 1px;

}
.border-left {
border-left: 5px solid #A40900;
padding-left: 1px;
}
#header {
margin: 0 auto;
padding: 4px 0 0px;
text-align: center;
width: 960px;
}
#header a.logo {
display: block;
margin: 0 auto;
padding: 0;
width: 540px;
}
#header a.logo img {
border: 0;
display: block;
margin: 0;
padding: 0;
width: 100%;
}
#header ul {
margin: 0;
padding: 0;
background-color: white;
border-top: 5px solid #A40900;
border-bottom: 5px solid #A40900;
padding: 10px 0;
}
#header ul li {
display: inline-block;
list-style: none;
margin: 0px;
padding: 0 10px;
text-align: center;
}
#header ul li a {
color: #000;
font-family: Oswald ExtraLight;
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
text-transform: uppercase;
}
#header ul li a:hover, #header ul li.selected a {
color: #0ba39c;
}
#body {
margin: 0;
padding: 0 0 30px;
text-align: center;
}
#body #welcome {
margin: 5%;
padding: 15px;
position: relative;
width: 35%;
float: left;
background-color: white;
display: inline;
}
#body #navihelp {
float: left;
margin: 5%;
padding: 15px;
position: relative;
background-color: #A40900;
display: inline-block;
width: 35%;
}
#body #contact {
background-color: #A40900;
float: left;
width: 35%;
padding: 15px;
margin: 5%;
display:inline-block;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Willkommen beim Phönix-Brandschutz</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">
<script src="js/mobile.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<a href="index.html" class="logo"><img src="images/logo.png" alt=""></a>
<ul id="navigation">
<span id="mobile-navigation">&nbsp;</span>
<li class="selected border-right">
<a href="index.html">Startseite</a>
</li>
<li class="border-right">
<a href="about.html">Über uns</a>
</li>
<li class="border-right">
<a href="anfahrt.html">Anfahrt</a>
</li>
<li class="border-right">
<a href="leistungen.html">Leistungen</a>
</li>
<li class="border-right">
<a href="anfrage.html">Kontaktanfrage</a>
</li>
<li>
<a href="allgemein.html">Allgemeine Informationen</a>
</li >
<li class="border-left">
<a href="impressum.html">Impressum</a>
</li>
</ul>
</div>
<div id="body">
<div id="welcome">
<h1>Herzlich Willkommen</h1>
<p>
abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remolo voluptam eum, conem hit ea qui utem idia sed qui id el ma culpa ipid exped quas evellup tiisqui as restrum natia dero temporerum rest re nis id quam inusda sitatibus utas ad quias que inimus eaque parum fugitio beati repedit pe veliquat rendebis aturit quibuscipsae perferro omnissi dolenime porum ari re numquae si aliquia dolum ipsa doloritat.
Dam eate nusto dolut haris dolupta tumquo ommodit ium doluptas quo tem faceprem exerferspis destiam, ipsunte solorio vellaboribus dolorerspe nonsequ odisit etur rernam nus dolor aut odi natius delestore dolupti oressimus ex eicipsumque odit et animus, quassunt, offici volut molor anda samenitem la vero doluptat.
Exped et alibus, coria ped magnia el inus mi, officiisqui dus eiusament omnihilit vellorrum iderrum rati aciisquid magnim con nost que dipiet quo consequas dolum volende bitatis ratio explic tem hariant et, senet ea que namus resendae si officipicil estia volupta turem. Musam, verchitem reicium et, volupta tibusam vendi nem. Ut aspedita quist, ut quos ra quuntur? Ebis antum ut eatemoluptat ommolupti conse comnimagnat fuga. Untis distrupta dolendi omnihit
</p>
</div>
<div id="navihelp">
<h2>Navigation</h2>
<p> abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remolo voluptam eum, conem hit ea qui utem idia sed qui id el ma culpa ipid exped quas evellup tiisqui as restrum natia dero temporerum rest.
</p>
</div>
<div id="contact">
<h2>Unsere Kontaktdaten:</h2>
<p>abcdItaepro quibus non ex et quos aliquo vendus si doluptasint restior eniscid ernam, te volut mintectiam et eos voluptatem et que volupta que sequiae. Ut latem auteseque la solumendit que nosti remol)</p>
</div>
</div>
</body>
</html>





And it should look like:
Screendesign Body

Hope you can help me

Answer

To fix #2: Just add margin-bottom: 5%; to #body #welcome.

Regarding #1 - please, explain, because it's not clear to me, what you want to get (schematic screenshot would be ok).