pessoal estava querendo que esses três elementos a data o local e esse botão verdes ficarem um o lado do outro no centro da tela tanto no desktop quanto no mobile eu preciso fazer isso com float mais não posso usar framework como bootstrap e nem media queries se possível eu tentei aqui porem os elementos ficam muito juntos e no mobile fica torto segue as imagens e o código.
OBS: Percebam que na imagem no desktop eu consegui centralizar mais os elementos ficam muito juntos e quando você redimenciona a tela ele "buga" total e não centraliza.
HTML:
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="banner-01-header">
<img src="images/bg-palestrantes-v2.jpg" class="img-slide" >
<div class="content-header">
<img src="images/logo-www.png" class="logo-center">
<h2 class="title">Você já pensou em ser uma mulher mais poderosa?</h2>
<div class="info-date">
<p class="date-event"><b><span>27, 28 e 29</span></b> <br> de Outubro</p>
<a href="#" class="link-garanta-vaga">Garanta sua vaga</a>
<p class="address-hotel"><b>Sheraton São Paulo <br> WTC Hotel</b> <br>
São Paulo | SP | Brasil</p>
</div>
</div>
</div>
</li>
<li>
<div class="banner-01-header">
<img src="images/2.jpg" class="img-slide">
<a href="#" class="link-garanta-vaga">Garanta sua vaga</a>
</div>
</li>
</ul>
</div>
CSS:
.banner-01-header{
position: relative;
height: 700px;
}
.banner-01-header .content-header{
text-align: center;
font-family: 'Ubuntu', sans-serif;
}
.banner-01-header .content-header .logo-center{
margin-top: 30px;
}
.banner-01-header .content-header .title{
text-transform: uppercase;
color: #fff;
margin-top: 20px;
}
.banner-01-header .content-header .info-date{
display: inline-block;
margin: 275px auto;
}
.banner-01-header .content-header .info-date .date-event{
color: #fff;
float: left;
}
.banner-01-header .content-header .info-date .date-event span{
font-size: 35px;
}
.banner-01-header .content-header .info-date .link-garanta-vaga{
border-radius: 0 30px !important;
background: #28b40d !important;
background: -moz-linear-gradient(top, #28b40d 0%, #49ed16 100%) !important;
background: -webkit-linear-gradient(top, #28b40d 0%,#49ed16 100%) !important;
background: linear-gradient(to bottom, #28b40d 0%,#49ed16 100%) !important;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28b40d', endColorstr='#49ed16',GradientType=0 ) !important;
border: 3px solid rgba(0, 0, 0, 0.41) !important;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35) !important;
text-shadow: 1px 1px #013600;
color: #fff;
font-size: 25px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
padding: 13px 65px;
display: inline-block;
float: left;
}
.banner-01-header .content-header .info-date .address-hotel{
color: #fff;
text-align: left;
float: left;
font-size: 18px;
}