How to get elements into the page? - html

Question

I have this HTML code and the result is that my whole page is center aligned. This causes my background color in the top navigator to be centered and my footer to be centered too. But both in the initial box and in the footer and in the header there is the scrollbar and it does not put these elements on the whole page.
Can anyone help me to solve this problem?
body, html {
height: 100%;
width: 100%;
}
html,
body {
margin: auto;
padding: 0%;
}
.section {
width: 100%;
}
.container.slidercontent {
background: #D4988E;
}
.container {
position: relative;
width: 1170px;
margin: auto;
color: #444;
font-size: 14px;
font-weight: 300;
font-family: Roboto;
overflow: hidden;
}
.section .container {
padding: 50px 0 50px 0;
}
.section.bg {
background: #f7f7f7;
}
/*
Header
*/
.hold {
height: 80px;
}
.header {
line-height: 80px;
width: 100%;
transition: line-height 0.2s linear, box-shadow 0.2s linear;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: rgba(245, 245, 245, 0.97);
}
.header.small {
line-height: 50px;
box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.8);
}
.header.small > .container > #logo {
height: 40px;
}
#logo {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: red;
float: left;
height: 40px;
width: 170px;
margin-left: 5px;
}
/*
Slider
*/
.section .slider,
.section .footer {
background: #333;
}
.slidercontent {
text-align: center;
}
.hero {
font-family: 'roboto';
color: white;
font-weight: normal;
letter-spacing: 1px;
}
h1.hero {
font-size: 54px;
}
h2.hero {
font-size: 20px;
margin-bottom: 60px;
font-family: 'arial'
}
h1.hero:after {
content: "";
width: 300px;
position: relative;
border-bottom: 1px solid #aaa;
text-align: center;
margin: auto;
margin-top: 15px;
}
.call {
color: white;
display: block;
margin-bottom: 20px;
}
.call span {
display: inline;
border: 1px solid white;
padding: 8px 13px;
font-size: 20px;
transition: background 0.15s linear;
}
.call span:hover {
background: rgba(255, 255, 255, 0.1);
cursor: pointer;
}
/*
Columns
*/
.col {
float: left;
padding: 0;
margin: 0;
position: relative;
}
.col.four {
width: 23%;
margin: 0 1%;
}
.col.three {
width: 31.3%;
margin: 0 1%;
}
.col.two {
width: 40%;
margin: 0 2.5%;
padding: 0 2.5%;
}
.col.extrapad {
padding-top: 20px;
padding-bottom: 20px;
}
.col .service,
.col .feature {
font-size: 21px;
font-weight: 300;
font-family: 'Roboto Slab', sans-serif;
}
.col .service:after {
content: "";
width: 50px;
position: relative;
border-bottom: 1px solid #eee;
display: block;
text-align: center;
margin: auto;
margin-top: 15px;
}
.col .feature {
font-size: 19px;
}
.col h1.side,
.col p.side,
.col span.side:first-of-type {
margin-left: 50px;
text-align: left;
}
.col .icon {
border-radius: 50%;
height: 85px;
width: 85px;
line-height: 85px;
text-align: center;
margin: 0 auto;
transition: background 0.25s linear, color 0.25s linear;
}
.col .icon.side {
position: absolute;
padding: 0;
margin: 0;
top: -15px;
height: 50px;
width: 50px;
}
.col:hover > .icon {
background: #F44336;
color: white;
}
.col:hover > .icon.side {
background: initial;
color: initial;
}
.responsivegroup {
display: none;
}
/*
Column specifics
*/
.col p,
.col h1 {
padding: 0%;
text-align: center;
}
.group.margin {
margin-bottom: 20px;
}
.col .imgholder {
height: 300px;
width: 100%;
background: #333;
transition: background 0.3s linear;
}
.col.bg {
background: #FFF;
}
.col.pointer {
cursor: pointer;
}
.col.bg:hover .imgholder {
background: #555;
}
.col span.feature {
font-size: 20px;
}
/*
Text
*/
.container > h1:not(.hero) {
margin-bottom: 30px;
text-align: center;
}
.container > h1:after {
content: "";
width: 30px;
position: relative;
border-bottom: 1px solid #aaa;
display: block;
text-align: center;
margin: auto;
margin-top: 15px;
}
h2 {
font-family: 'Roboto Slab', sans-serif;
text-align: center;
font-weight: 400;
font-size: 18px;
}
.left,
.left > h1,
.left > p {
text-align: left;
}
.reset {
text-align: left !important;
}
.reset:after {
display: none !important;
}
/*
Gallery
*/
div.gallery {
border: 1px;
margin-bottom: 25px;
}
div.gallery:hover {
border: 1px solid #D4988E;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 8px;
text-align: center;
font-family: Verdana;
}
div.desc1 {
padding: 12px;
text-align: center;
font-family: Garamond;
font-weight: bold;
font-size: 18px;
letter-spacing: 1px;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 25%;
}
.footer {
position:relative;
left: 0px;
right: 0px;
right: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/css/style.css">
<title>flowerbee</title>
</head>
<body>
<!-- topnav======================================== -->
<div class="topnav">
<div style="position:relative;padding-top:0%; bottom: 0;">
<iframe src="TopNav.html" width="100%" height="55" allowfullscreen></iframe>
<style>iframe {border: none}</style>
</div>
</div>
<div class="section">
<div class="slider">
<div class="container slidercontent">
<h1 class="hero">flowerbee</h1>
<h2 class="hero">Flower delivery</h2>
</div>
</div>
</div>
<!-- galleria prodotti======================================== -->
<div class="section bg">
<div class="container">
<h1>Product gallery</h1>
<h2>all our bouquets!</h2>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BigBang.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Big Bang/BigBang1.jpg" alt="Big Bang" width="600" height="600">
</a>
<div class="desc1">Big Bang</div>
<div class="desc">starting from 33.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Iris.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Iris/Iris1.jpg" alt="Iris" width="600" height="400">
</a>
<div class="desc1">Iris</div>
<div class="desc">starting from 35.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Sundays.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Sundays/Sundays1.jpg" alt="Sundays" width="600" height="400">
</a>
<div class="desc1">Sundays</div>
<div class="desc">starting from 35.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Lilac.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Lilac/Lilac1.jpg" alt="Lilac" width="600" height="400">
</a>
<div class="desc1">Lilac</div>
<div class="desc">starting from 29.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Onirium.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Onirium/Onirium1.jpg" alt="Onirium" width="600" height="600">
</a>
<div class="desc1">Onirium</div>
<div class="desc">starting from 33.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Zanni.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Zanni/Zanni1.jpg" alt="Zanni" width="600" height="400">
</a>
<div class="desc1">Zanni</div>
<div class="desc">starting from 39.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Suite.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Suite/Suite1.jpg" alt="Suite" width="600" height="400">
</a>
<div class="desc1">Suite</div>
<div class="desc">starting from 39.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/BoraBora.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/BoraBora/BoraBora1.jpg" alt="BoraBora" width="600" height="400">
</a>
<div class="desc1">Bora Bora</div>
<div class="desc">starting from 42.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Moonwalk.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Moonwalk/Moonwalk1.jpg" alt="Moonwalk" width="600" height="600">
</a>
<div class="desc1">Moonwalk</div>
<div class="desc">starting from 33.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Birdy.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Birdy/Birdy1.jpg" alt="Birdy" width="600" height="400">
</a>
<div class="desc1">Birdy</div>
<div class="desc">starting from 51.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/Manila.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/Manila/Manila1.jpg" alt="Manila" width="600" height="400">
</a>
<div class="desc1">Manila</div>
<div class="desc">starting from 35.00 €</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a href="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/OceanEyes.html">
<img src="/Users/giuliettamotolese/Desktop/Accademia/III ANNO/II Semestre/Web Design/flowerbee/codice/immagini/OceanEyes/OceanEyes1.jpg" alt="OceanEyes" width="600" height="400">
</a>
<div class="desc1">OceanEyes</div>
<div class="desc">starting from 42.00 €</div>
</div>
</div>
<!-- recensioni======================================== -->
<div class="section">
<div class="container">
<h1>Wow? Wow wow wow wow!</h1>
<h2>Wow</h2>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow wow wow wow wow wow</p>
</div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow</p>
</div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow wow wow wow</p>
</div>
<div class="group margin"></div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow</p>
</div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow</p>
</div>
<div class="col three">
<h1 class="icon side">[]</h1>
<h1 class="feature side">Wow</h1>
<p class="side">Wow wow wow wow wow wow wow wow</p>
</div>
<div class="group margin"></div>
</div>
<!-- footer======================================== -->
<div class="footer">
<div style="position:relative;padding-top:0%; bottom: 0;">
<iframe src="Footer.html" width="100%" height="370" allowfullscreen></iframe>
<style>iframe {border: none}</style>
</div>
</div>
</body>
</html>

Answer 1

you could do <div class="center"></div> to fix your situation with the centering but Iframe displays a webpage so using it for anything else other then to advertise a webpage would be pretty useless but just use the attribute scrolling="no" for your iframe and for css .center { text-align: center; }