我正在尝试使我的幻灯片“fadein”与我的页脚和菜单栏的宽度相同。我试过搞乱css宽度，但它仍然是静态的。我把它放在一个容器中，它应该保持在70％。请给我任何提示，以便我能理解我做错了什么？谢谢。
https://jsfiddle.net/zdc1s66L/
HTML
<!DOCTYPE html>
<html>
<head>
<title> Kontakt </title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div class="container">
<h1 align="center">
<a href="index.html"><img src="logo.png" alt="A.Willi A.G" /></a>
</h1>
<div class="menu_div">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">Bewerber</a>
<div class="dropdown-content">
<a href="info.html">Info</a>
<a href="jobs.html">Jobs</a>
</div>
</li>
<li class="dropdown"><a href="#" class="dropbtn">Kunde</a>
<div class="dropdown-content">
<a href="personalverleih.html">Personalverleih</a>
<a href="toolrental.html">Werkzeuge Mieten</a>
<a href="referenzen.html">Referenzen</a>
<a href="quali.html">Qulität, Sicherheit und Weiterbildung</a>
</li>
</div>
<div class="fadein">
<img src="welder1.png">
<img src="welder1.png">
<img src="welder1.png">
</div>
<div class="indexinfo"></div>
<div class="textinfo">
<p style="text-align:left;">
Die <font color="#004b77"><b>A.Willi A.G</b></font> ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich tätig mit über 30-jährige Erfahrung in dieser Sparte.
Wir haben uns spezialisiert auf die Vermittlung und den Verleih von qualifiziertem Fachkräfte für Rohr-Stahl-Gebäudetechnik.
Für die Beratung und Vermittlung sind in diesen Gebieten ausgewiesene Fachleute zuständig, welche als kompetente Partner mit unseren Kunden gemeinsam den Personaleinsatz planen.
In der A.Willi AG sind über 100 erfahrene Facharbeiter im Einsatz.
Unsere Personalberater haben in ihrem Vermittlungsbereich eine Fachausbildung und praktische Berufserfahrung sowie eine kaufmännische Weiterbildung. Als Spezialisten in ihrem Bereich erkennen sie schnell die Bedürfnisse unserer Kunden und vermitteln das entsprechend qualifizierte Fachpersonal. Sie sind die persönlichen Ansprechpartner während des gesamten Personaleinsatzes und garantieren durch regelmäßige Kontaktaufnahme eine optimale Anpassung an die Kundenbedürfnisse.
Das,Fachkräfte das wir unseren Kunden zur Verfügung stellen, wird von unseren Personalconsultants gezielt ausgewählt. Wir verfügen über einen festen Bestand an fachlich ausgezeichneten und zuverlässigen Mitarbeitern. Ihre Fachkompetenz halten wir durch berufliche Weiterbildung auf dem aktuellen Stand. Die Fachkräfte verfügen über Erfahrungen im Bereich der Chemie, Bio, Pharma- und Lebensmittelindustrie, Öl- und Gaspipelines, Fernheizung und der Energieversorgung, Gebäudetechnik, Betriebsunterhaltung und Metallverarbeitung, Anlagen, Apparatebau, Stahlbau und Ausland Montage.
Unsere Kunden schätzen die hohe Qualität unserer Dienstleistungen und die auf langfristigen Erfolg und faire Partnerschaft ausgerichtete Strategie. Wir sind stolz auf die gute Zusammenarbeit mit vielen langjährigen Kunden.
Unser Ziel ist quantitatives und qualitatives Wachstum. Unsere Dienstleistungen verbessern wir kontinuierlich, um unseren Kunden einen individuellen, zuverlässigen und schnellen Service zu bieten.
A. Willi AG= Personalberater= Fachkräfte= Kunden= Ziel
</p>
</div>
</ul>
<footer>
<div class="footer">
<img class="footer-img" src="location_icon.png" width="25">
<div class="info-text">
<p><font color="#fff"> Wasgenring 94, CH-4055 Basel-Stadt</font></p>
</div>
<img class="footer-img" src="mail_icon.png" width="25">
<div class="info-text">
<p><font color="#fff"> info@awilli-ag.ch</font></p>
</div>
<img class="footer-img" src="icon_phone.png" width="25">
<div class="info-text">
<p><font color="#fff">t +41 (0)79 322 14 20</font></p>
</div>
<a href="Zertifikat.html">
<img class="footer-img" src="dossier_icon.png" width="25">
</a>
<div class="info-text">
<p><font color="#fff">Zertifikate</font></p>
</div>
</footer>
</body>
</div>
</html>
CSS
body { font-family: verdana; background:white ; color: black; }
.menu_div{background-color: #333; width:100%;}
ul {
list-style-type: none;
margin: 0 auto;
display:table;
padding: 0;
z-index: 100;
overflow: hidden;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
@keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}
.fadein { position:absolute; height:400px; width:20px; outline: 1px solid blue; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
.menu_div {
position: relative;
z-index: 0;
height: 2.9em;
margin-bottom: -0.4em;
margin-top: 0em;
z-index:1000;
background-color: #333
}
.fadein {
position: relative;
z-index: 3;
background: ;
width: 10%;
left: -0.5px;
top: 0em;
width: 90%;
}
.fadein img{
margin:0 auto;
width: 90%;
max-height: 400%;
}
.container {
max-width: 90%;
margin-left: auto;
margin-right: auto;
}
.article {
text-align: left;
height: 200px;
margin-bottom:11px
}
header {
background: white;color:black;
font-size: 0.9em;
}
}
.indexinfo {
padding:70px;
-webkit-flex: 1 100%;
flex: 1 110%;
height: 70px;
border: px solid black;
height: 200px:
text: center;
}
footer {
display: block;
width: 100%;
background-color: #222;
padding: 70px 1px;
font-size: 20px;
color: white
{background-position: 5% 90%;}
}
.footer {
display: flex;
align-items: center;
}
.footer-img {
width: 100px;
height: 100px;
}
p {
margin: 0;
}
textinfo {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}