【发布时间】：2021-05-13 19:24:12
【问题描述】：
我遇到了边距问题。 即使正文和 html 设置为边距：0 和填充：0，当我切换到移动视图时，它也会在整个页面的右侧添加 5-10 像素的边距。 我真的迷路了。 我尝试检查所有容器是否有边距或类似的东西，还将容器设置为 100% 宽度，但将其删除。我尝试了边界拳击等。似乎没有任何效果。 https://silly-goldwasser-47fc36.netlify.app/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pecsi Mediacio</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" type="text/css" href="./slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="./slick/slick-theme.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/48a88d4550.js" crossorigin="anonymous"></script>
</head>
<body>
<header>
<a class="logo" href="/">
<img src="./assets/svg/logo.svg" alt="dr.bokor_beatrix_logo_pecsi_mediacio" />
</a>
<nav>
<a href="/">Főoldal</a>
<a href="/Pages/mediacio-menete.html">A mediáció menete</a>
<a href="#section2">Üzleti mediáció</a>
<a href="#section2">Családjogi mediáció</a>
<a href="#section3">Rólam</a>
<a class="fancy-btn" href="#section4"><span class="button_text1">Kapcsolat</span></a>
</nav>
<nav id="nav" class="nav" role="navigation">
<!-- ACTUAL NAVIGATION MENU -->
<ul class="nav__menu" id="menu" tabindex="-1" aria-label="main navigation" hidden>
<li class="nav__item"><a href="/" class="nav__link">Főoldal</a></li>
<li class="nav__item"><a href="/Pages/mediacio-menete.html" class="nav__link">A mediáció menete</a></li>
<li class="nav__item"><a href="/Pages/uzleti-mediacio.html" class="nav__link">Üzleti Mediáció</a></li>
<li class="nav__item"><a href="/Pages/csaladjogi-mediacio.html" class="nav__link">Családjogi mediáció</a></li>
<li class="nav__item"><a href="/Pages/rolam.html" class="nav__link">Rólam</a></li>
</ul>
<!-- MENU TOGGLE BUTTON -->
<a href="#nav" class="nav__toggle" role="button" aria-expanded="false" aria-controls="menu">
<svg class="menuicon" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
<title>Toggle Menu</title>
<g>
<line class="menuicon__bar" x1="13" y1="16.5" x2="37" y2="16.5"/>
<line class="menuicon__bar" x1="13" y1="24.5" x2="37" y2="24.5"/>
<line class="menuicon__bar" x1="13" y1="24.5" x2="37" y2="24.5"/>
<line class="menuicon__bar" x1="13" y1="32.5" x2="37" y2="32.5"/>
<circle class="menuicon__circle" r="23" cx="25" cy="25" />
</g>
</svg>
</a>
<!-- ANIMATED BACKGROUND ELEMENT -->
<div class="splash"></div>
</nav>
</header>
<main>
<!-- HERO SECTION -->
<section class="hero_section">
<div class="textBox">
<h1>Alternatív,<br> konfliktuskezelési<br> módszer</h1>
<p class="elso_bekezdes">
A szemben álló felek egy harmadik. pártatlak személy segítségével <br>
találják meg a meoldást vitájuk rendezésére.
</p>
<a class="fancy-btn" href="#section1"><span class="button_text2">Tovább</span></a>
<div class="title_holder">
<p><span class="title_holder_first">dr bokor beatrix ügyvéd, mediátor </span><br>
Pécsi Ügyvédi Kamara 21/VI.</p>
</div>
<div class="also_nav">
<a class="also_nav_button" id="elso" href="#section2"><i class="fas fa-arrow-right"></i>ÜZLETI MEDIÁCIÓ</a>
<a class="also_nav_button" id="masodik" href="#section2"><img src="assets/icon/arrowRight.svg" />CSALÁDJOGI MEDIÁCIÓ</a>
</div>
</div>
</section>
<!-- MEDIÁCIÓ MENETE -->
<section class="mediacio_menete" id="section1">
<div class="textBox2">
<h1>A mediáció menete</h1>
<p class="hogyanT">HOGYAN TÖRTÉNIK?</p>
</div>
<div class="carousel">
<section class="responsive">
<div>
<div class="elso_elem">
<img src="assets/icon/search.svg" />
<h2>Előkészítő ülés</h2>
<p>A felek külön-külön jelennek meg<br>
a mediátor előtt. Tartama 1-1,5<br>
óra.</p>
</div>
</div>
<div>
<div class="elso_elem" id="arrow_1">
<img src="assets/icon/mediation.svg">
<h2>Mediációs ülés</h2>
<p>A felmerült probléma mediációs <br>
keretek közötti közös <br>
megbeszélése 3 óra időkeret áll a <br>
felek rendelkezésére.</p>
</div>
</div>
<div>
<div class="elso_elem" id="arrow_2">
<img src="assets/icon/circle.svg">
<h2>Különtárgyalás</h2>
<p>Olyan esetekben, amikor egy <br>
adott problémával kapcsolatosan<br>
megakad a folyamat.</p>
</div>
</div>
<div>
<div class="elso_elem" id="arrow_3">
<img src="assets/icon/document.svg">
<h2>Megállapodás írásba foglalása</h2>
<p>Lehetőség szerint az ülés végén<br>
kerül írásban rögzítésre a felek<br>
megállapodása.</p>
</div>
</div>
<div>
<div class="elso_elem" id="arrow_4">
<img src="assets/icon/flag.svg">
<h2>Utánkövetés</h2>
<p>A mediátor az ülést követően<br> megkeresi a
feleket a mediációs<br> folyamat hatásainak,<br>
kimenetelének felmérése véget.</p>
</div>
</div>
</section>
</div>
<div class="szoveg_doboz">
<p>
A közvetítő tevékenységéért díj jár és igényt tarthat a
felmerült és igazolt költségei <br> megtérítésére, továbbá a díj és
költségek előlegezésére is. Az egyes ügyekben <br> felszámítandó díj
összegében a közvetítő és a felek szabadon állapodnak meg, <br>
melyet fő szabályként a felek együttesen viselnek.
</p>
</div>
<div class="dijazas">
<p>
Díjazás: Felenként 8.000 - 15.000 Ft/Óra <br />
Okiratszerkesztés: 20.000 Ft-tól
</p>
</div>
</section>
<!-- FONTOS INFORMÁCIÓK -->
<section class="fontos_informaciok">
<h1>Fontos információk</h1>
<h2>Per előtt vagy per alatt?</h2>
<div class="lista">
<ul>
<li>Permegelőző konfliktuskezelés; alternatíva a vita peresítés előtti <br>
kölcsönös megegyezésen alapuló rendezésére</li>
<li>illetve lehetőség nyílik folyamaban lévő peres eljárás esetén is az <br>
érdekelt felek kölcsönös megegyezésével, közvetítő bevonása <br>
mellett a felek közötti vita peren kívüli rendezésére.</li>
</ul>
</div>
<div class="kozepso_lista">
<div class="kifizeti">
<h2>Ki fizeti a díjat?</h2>
<p class="akozv">
A közvetítő tevékenységéért díj jár és igényt tarthat a felmerült és igazolt <br>
költségei megtérítésére, továbbá a díj és költségek előlegezésére is. Az egyes <br>
ügyekben felszámítandó díj összegében a közvetítő és a felek szabadon <br>
állapodnak meg, melyet fő szabályként a felek együttesen viselnek.
</p>
</div>
<div class="fontos_tudni">
<h2>Fontos tudni!</h2>
<p>
A természetes személyek és más személyek személyi és vagyoni jogaival <br>
kapcsolatban felmerült azon polgári jogviták közvetítői eljárás keretében <br>
történő rendezése, amelyekben a felek rendelkezési jogát törvény nem <br>
korlátozza, a közvetítői tevékenységről szóló 2002. évi LV. törvény hatálya alá <br>
tartozik.
</p>
</div>
</div>
<div class="milyen_teruleten">
<p class="mta">
milyen területen alkalmazható?
</p>
<p class="mta2">
Az élet valamen területén, ahol konfliktushelyzet adódhat. <br>
Az alábbi területeket emelném ki:
</p>
<div class="lista_tarto">
<ul>
<li>Válási helyzet</li>
<li>Válási helyzet</li>
<li>Válási helyzet</li>
<li>Válási helyzet</li>
<li>Válási helyzet</li>
<li>Válási helyzet</li>
<li>Válási helyzet</li>
<li>Válási helyzet</li>
</ul>
</div>
<div class="lista_tarto">
<ul>
</ul>
</div>
</div>
</section>
<!-- ÜZLETI MEDIÁCIÓ -->
<section class="uzleti_csaladi_mediacio" id="section2">
<div class="fenti_kartya">
<div class="fenti_kartya_textBox">
<h1>Üzleti Mediáció</h1>
<h2>Pénzkövetelés érvényesítése / Munkaügyi problémák kezelése</h2>
<p>
Mondhatjuk, hogy a mediáció az üzleti életben is a jövő útja, hiszen
ez az a terület <br > ahol leginkább érvényesül az idő pénz elve. A gyors
vitarendezéssel rengeteg költség <br> takarítható meg.
</p>
<a class="fancy-btn" href="/Pages/uzleti-mediacio.html">Részletek</a>
</div>
</div>
<div class="lenti_kartya">
<div class="lenti_kartya_textBox">
<h1>Családjogi mediáció</h1>
<h2 class="valasi">válási helyzet / vagyonmegosztás / gyermektartásdíj<h2>
<p class="kartya_jobb_szoveg">
A család az emberi kapcsolódások legérzékenyebb területe, hiszen
<br>ez a társadalom legkisebb egysége, az alap,
ahonnan az egyén kiindul.
</p>
<a class="fancy-btn" href="/Pages/csaladjogi-mediacio.html">Részletek</a>
</div>
</div>
</div>
</section>
<!-- MAGAMRÓL -->
<section class="magamrol" id="section3">
<div class="textBox3">
<h1>Dr Bokor Beatrix, <br >ügyvéd, mediátor</h1>
<p>
Több mint tíz éves szakmai tapasztalatom során is mindvégig arra <br>
törekedtem,
hogy amennyiben lehetséges, együttműködjek a felekkel peren <br>
kívüli megállapodás létrehozása érdekében, segítsem őket vitájuk békés,<br>
gyors rendezésében.
</p>
<a class="fancy-btn" href="/Pages/rolam.html">Részletek</a>
</div>
<div class="idezet">
<div class="idezet_tarto">
<img src="/assets/icon/">
<h2>Az igazság nem a mondatokban rejlik, hanem a <br> torzítatlan létezésben.
Az öröklét nem az időben<br> rejlik, hanem az összhang állapotában.
</h2>
</div>
<p>Weöres S</p>
<img class="bea_karfonas" src="./assets/img/bokorbeatrix.png" alt="">
</div>
</section>
<!-- CONTACT FORM -->
<section class="contact_form" id="section4">
<h1>
Lépjen kapcsolatba <br> és oldjuk meg együtt!
</h1>
<div class="contact_form_holder">
<div class="form">
<form>
<div class="felso_form_resz">
<div class="user-box">
<input type="text" name="" required="">
<label>Szakterület</labe>
</div>
<div class="user-box">
<input type="text" name="" required="">
<label>Ön neve</label>
</div>
</div>
<div class="also_form_resz"> <div class="user-box" id="mailcim">
<input type="text" name="" required="">
<label>E-mail címe</label>
</div>
<div class="user-box">
<input type="text" name="" required="">
<label>Telefonszáma</label>
</div></div>
<div class="user-box" id="uzenet">
<input type="text" name="" required="">
<label>Üzenet</label>
</div>
</form>
<div class="form_footer">
<div class="consent">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<p>Elfogadom az <span class="avsz">Adatvédelmi Szabályzatot</span></p>
</div>
<button class="fancy-btn" id="submit_button" type="submit">Küldés</button>
</div>
</div>
<div class="contact_inform">
<div class="contact_inform_holder">
<ul class="form_lista">
<div class="form_lista_elem">
<img src="/assets/icon/messenger.svg" alt="facebook_messenger_icon">
</div>
<div class="form_lista_elem">
<img src="/assets/icon/phone.svg" alt="telefonos_elérhetőség_bokor_beatrix">
</div>
<div class="form_lista_elem">
<img src="/assets/icon/email.svg" alt="emailes_elérhetőség_bokor_beatrix">
</div>
<div class="form_lista_elem">
<img src="/assets/icon/pin.svg" alt="iroda_elhelyezkedés_bokor_beatrix_">
</div>
</ul>
</div>
<div class="form_lista_szovegek">
<p>/pecsmediacio</p>
<p>+36 70 422 7122</p>
<p>hello@pecsimediacio.hu</p>
<p> 7623 Pécs, Közraktár u. 5.</p>
</div>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer class="main_footer">
<div class="footer_left">
<h2>Adószám: 58601851-1-22 Pécsi Ügyvédi Kamara KASZ: 36057848<br> Im nyilvántartási szám: T/002401/1
</h2>
<p>
Minden Jog Fenntartva ©2021 Dr Bokor Beatrix
</p>
</div>
<div class="footer_right">
<a href="#">Adatvédelmi Szabályzat</a>
<a href="#">Impresszum</a>
<a href="#">Kapcsolat</a>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script type="text/javascript" src="slick/slick.js"></script>
<script>
$(".responsive").slick({
dots: false,
infinite: false,
slidesToShow: 4.5,
slidesToScroll: 3,
responsive: [
{
breakpoint: 600,
settings: {
slidesToShow: 1.5,
slidesToScroll: 1
}
}
]
});
</script>
<script src="./main.js" type="text/javascript"></script>
</body>
</html>
【问题讨论】：
-
实验删除页面中的所有内容，然后重新引入每个部分，直到显示出来