Problem leaving a responsive section

1

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>	
    
asked by anonymous 03.01.2018 / 01:51

1 answer

1

Browser does not normally "zoom" in fixed values like in PX for example. The ideal for your site to be Responsive in Browser Zoom is to use all values in% or Vw / Vh

NOTE: Despite this I advise you to use @media screen and () {} to make fine adjustments to zoom in the Browser. And think of using Measures in REM, EM, VW / VH and%, avoid PX .

    
03.01.2018 / 02:57