Designer going to CSS. Fundamental flaws with links in nested centered divs - css

Question

I want to set up a full width slideshow based on the Design I've prepared. I'm building the page on the Unsemantic CSS framework as I was already familiar with 960 gridsystem (960.gs).
What I'm missing is how to write physically correct HTML & CSS. I don't want to build these unstable workarounded glued pages like most.
I've tried my best to build it but nothing seems to work the way it should. Here is a part of the page where a slideshow should appear.
However, it looks like this.
Here's the CCS:
<style>
.slide-wrapper{
background-color:black;
width:100%;
overflow:hidden;
}
.slide-item{
width:100%;
overflow:hidden;
color:white;
}
.slide-img-wrapper{
position:relative;
}
.slide-img{
width:100%;
float:left;
position:relative;
}
.slide-description{
position:absolute;
float:left;
text-align:center;
width: 100%;
margin-top:16%;
}
.description-wrapper{
}
</style>
<div id="slide-wrapper">
<div class="slide-item">
<img class="slide-img" src="../villas.praivit/img/lead.jpg" />
<div class="slide-description">
<p class="location">SWITZERLAND, CERN</p>
<h1>VILLA PANORAMA</h1>
<p class="details">Local Time <b>4:10 am</b>, Temperature <b>32F°</b></p>
<div class="button-1">VIEW VILLA</div>
</div>
</div>
</div>

Answer 1

Is this what you are looking for?
<div id="slide-wrapper">
<div class="slide-item">
<img class="slide-img" src="http://dreamatico.com/data_images/mountain/mountain-1.jpg" />
<div class="slide-description">
<p class="location">SWITZERLAND, CERN</p>
<h1>VILLA PANORAMA</h1>
<p class="details">Local Time <b>4:10 am</b>, Temperature <b>32F°</b></p>
<div class="button-1">VIEW VILLA</div>
</div>
</div>
</div>
.slide-wrapper{
background-color:black;
width:100%;
overflow:hidden;
}
.slide-item{
width:100%;
overflow:hidden;
color:white;
}
.slide-img-wrapper{
position:relative;
}
.slide-img{
width:100%;
float:left;
position:relative;
}
.slide-description{
position:absolute;
float:left;
text-align:center;
width: 100%;
margin-top:16%;
}
.description-wrapper{
}
.button-1{
display: inline-block;
background-color: #b8955d;
color: #fff;
box-sizing: border-box;
padding: 10px;
}
.button-1 a{
color: #fff;
text-decoration: none;
}