Layout problem after integrating a slideshow html css - html

Question

one page of my website is locking like that:
http://www.pflanzspass.bplaced.net/
Yesterdy I tried to integrate a slideshow:
http://www.pflanzspass.bplaced.net/indextest.php
The slideshow is working, but now there are some new layout problems:
now:
before:
I don't know why.
This is my new css-Code for the slideshow:
* {box-sizing: border-box}
/*body {
font-family: Verdana, sans-serif;
margin:0
}*/
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* Caption text */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #999999;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #111111;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
This is the css-code, already online before added the slide-show css-code:
*{
margin: 0px;
padding: 0px;
}
body {
font-family:Verdana;
font-size:10px;
}
#wrapper{
width:1000px;overflow:hidden;
margin:0 auto 10px auto;background-image: url(./grafics/bg.gif);background-repeat:repeat-y;
}
/*-------------------------------------------------------------------*/
/* font-size */
/*-------------------------------------------------------------------*/
h1 {
font-size: 25px;
}
h2 {
font-size: 19px;
}
h3{
font-size:18px;
color:#660033;
}
h4, h5, h6 {
font-size: 16px;
}
p{
font-size: 14px;
margin-right:20px;
}
h2, h3, h4, h5, p{
margin-bottom:10px;
}
h5{
}
/*-------------------------------------------------------------------*/
/* links */
/*-------------------------------------------------------------------*/
a:link, a:visited, a:active, a:hover{
text-decoration:none;
color:#634142;
font-size:12px;
font-weight:bold;
}
a:active, a:hover{
text-decoration:underline;
}
/*-------------------------------------------------------------------*/
/* header */
/*-------------------------------------------------------------------*/
#header {
width:968px;
height:161px;
margin:0 13px 0 13px;
border:3px solid #000;
background-color: #000;
}
#header2{
width:974px;
height:65px;
padding:5px 0 0 0;
margin:0 13px 0 13px;
background:#fff;
clear:both;
}
#logo {
width:222px;
margin: 0 0 0 0;
padding: 0 5px 0 0;
float: left;
overflow: hidden;
}
#header-title {
height: 160px;
background: transparent url(banner_2.jpg) no-repeat 0 0;
float:left;
}
#ueberschrift {
padding:60px 0 0 20px;
color:#fff;
}
#ueberschrift p{
font-size:16px;
}
#content-header{
width:990px;height:60px;
padding:0 0 20px 10px;
}
#like{
width:77px;
margin:5px 30px 0 10px;
float:left;
}
#kaktus-banner{
width:468px;
margin:5px 0 0 129px;
float:left;
}
#wobinich{
width:964px;height:16px;
margin:0 13px 0 13px;
font-size:12px;
border-bottom:1px solid #000;
background:#fff;
float:left;padding:0 0 0 10px;
}
h2.title{
text-align:center;
height:40px;
font-size:30px;
background: transparent url(./grafics/bg-title1.gif) no-repeat 0px 35px;
}
h2.title2{
height:40px;
font-size:30px;
background: transparent url(./grafics/bg-title3.gif) no-repeat 0px 35px;
}
h2.gb{
height:30px;
background: transparent url(./grafics/bg-title3.gif) no-repeat 0px 25px;
}
/*-------------------------------------------------------------------*/
/* content */
/*-------------------------------------------------------------------*/
#content {
width:974px;
margin:0 13px 0 13px;
background:#fff;
float:left;
}
#content p{
line-height:24px;
}
#links{
width:185px;
margin:0 0 0 0;
float:left;
}
#mitte{
width:609px; /*609px*/
padding:10px 10px 0 10px;
float:left;
}
#mitte_a-z{
width:873px;
padding:10px 0 0 20px;
}
#mitte1{
width:767px;
padding:10px 10px 0 10px;
float:left;
}
#rechts{
width:160px;
margin:0 0px 10px 0;
float:right;
}
#film{
margin:10px 0 10px 182px;
}
#footer{
width:974px;height:30px;
font-size:12px;
line-height: 27px;
text-align:center;
color:#000;
border-top:1px solid #000;background:#fff;border-bottom:1px solid #000;background:#fff;
float:left;
}
#footer a{
font-weight:normal;
color:#000;
}
/*-------------------------------------------------------------------*/
/* navigation */
/*-------------------------------------------------------------------*/
.navtitle{
margin:0px;
background:#7fb37f;
text-align:center;
}
#navigationsleiste{
margin:0 16px 20px 0;padding:0 0 10px 0;
width:185px;background:#a5e8a5;
}
#navigationsleiste a{
display: block;
height: 20px;
padding:8px 0 0 19px;
color: #000;
text-decoration: none;
}
#navigationsleiste a:hover{
background: transparent url(./grafics/liste.gif) no-repeat 5px 12px;
}
#navigationsleiste a.aktiv{
background: transparent url(./grafics/liste.gif) no-repeat 5px 12px;
}
.link{
/*margin:0 16px -2000px 0;padding-bottom:2000px;*/
width: 185px;background:#a5e8a5;
}
.link a{
display: block;
height: 20px;
margin:2px;
padding:10px 0 10px 9px;
font-size:12px;
}
.link-re{
/*margin:0 0px -2500px 0;padding:0 0 2500px 0;*/
width: 160px;background:#a5e8a5;
}
.link-re a{
display: block;
height: 20px;
margin:0px;
padding:2px 0 0 20px;
font-size:12px;
font-weight:bold;
}
#zapp{
width:964px;height:20px;
margin:0 13px 0 13px;
font-size:12px;
background:#fff;
border-bottom:1px solid #000;
padding:10px 0 0 10px;
float:left;
}
.up{
margin:10px 0 10px 0px;
text-align:right;
}
.up a{
font-weight:bold;
}
.back{
margin:0 60px 0 0;
float:left
}
.zurueck{
float:left;
}
.ist{
float:left;
color:#a5a5a5;
margin-left:30px;
}
.vor{
margin:0 0 0 30px;
float:left;
}
/*-------------------------------------------------------------------*/
/* listenelemente */
/*-------------------------------------------------------------------*/
ul{
list-style-type:none;
}
li{
}
#mitte ul{
list-style-type:disc;
margin-left:15px;
}
#mitte li a{
}
ol{
font-size:14px;
margin:0 0 0 20px;
line-height:24px;
}
.cb{
clear:both;
}
img{
}
#table{
}
p.hn {
color: #870B0B;
}
p.se {
color:#057C11;
}
p.nanl {
color:#64057C;
}
p.bild {
float:left;
}

Answer 1

Remove height:20px form this style
.link a{
display: block;
height: 20px;
margin:2px;
padding:10px 0 10px 9px;
font-size:12px;
}

Answer 2

* {
box-sizing: border-box;
}
.link a {
display: block;
height: auto;
margin: 2px;
padding: 10px 0 10px 9px;
font-size: 12px;
}