I'm having trouble leaving a 100% responsive section it looks like this:
Whenyouzoomoutofthepageitlookslikethis:
Code:
.fundoserv
{
display: block;
overflow: hidden;
background-position: top center;
background-color: #F0F0F0;
width:auto;
min-height: 800px;
background-repeat: no-repeat;
color: #dad9d9;
background-attachment: fixed;
background-size: cover;
}
.fundoserv h2
{
height: 100px;
color: #305e78;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
margin-top: 30px;
font-size: 48px;
text-align: center;
}
.fundoserv h1
{
color: #000000;
font-family: 'Cuprum', sans-serif;
font-weight: 700;
margin-top: 100px;
font-size: 80px;
text-align: center;
}
.fundoserv img{
margin-left: 850px;
margin-top:-400px;
} // essa parte principalmente.
.ud_active {
background:#FFFFFF;
padding:1% 0 1% 2%;}
dt {
transition:all 300ms;
-webkit-transition:all 300ms;}
dt, dd {
width: 500px;
padding:1%;
margin-left: 180px;
}
dt {
font-family: 'Oswald', sans-serif;
background: #0B6383;
color: #59B4DB;
font-size: 25px;
text-transform:uppercase;
border-top:1px solid #FFFFFF;
cursor:pointer;
}
dt:first-child {
border-top:none;
}
dt:hover {
background:#0FECFF;
}
dd { font-family: 'Lato', sans-serif;
background:#333;
line-height:20px;
font-size:14px;
word-spacing:3px;
color:#999;
display:none;
}
<section class="services">
<div class="fundoserv">
<h1>Secure Job</h1>
<h2>Services</h2>
<article>
<dl id="ud_accordion">
<dt>VITORIAS</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>MELHOR DE 10 (MD10)</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>ELO BOOSTING</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>DUO BOOSTING</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>ELO BOOSTING (PREMIUM)</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
<dt>SECURE BOOSTING(EXCLUSIVE)</dt>
<dd>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonu</dd>
</dl>
</article>
<img src="img/logo.png" alt="faq">
</div>
</section>