Problems with float css property

Question

people were wanting these three elements to date the location and this green button to stand side by side in the center of the screen both on desktop and mobile I need to do this with float more I can not use framework like bootstrap and media queries if possible I tried here however the elements stay very close together and the mobile gets crooked follow the images and the code.

NOTE: Notice that in the image on the desktop I was able to centralize more the elements stay very close together and when you redeem the screen it "Leave" total and does not centralize.

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;
}

Answer 1

    .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 p{
  display: inline-block;
}

.banner-01-header .content-header .info-date a{
  margin: 0 15px;
}

.banner-01-header .content-header .info-date .date-event{
  color: #fff;

}

.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;
  }

.banner-01-header .content-header .info-date .address-hotel{
  color: #fff;
  text-align: left;
  font-size: 18px;
}

Try this css there, I got the paragraph that has by default display:block; and put display:inline-block; And I put lateral margin on a. I don’t know if I could, I removed the float:left;. I don’t see a way to do with it.