Q:

How to put logo in center using css

Before i start, I would like to apologize for my bad English.
I want to put website logo in center using css after Media Query (max-width: 1100px)
there is my css & html

.logo { 
  width: auto;
  height: auto;
  float:left;
  padding:22.5px 0px 0px 10px;
}
<div class="logo">
  <img src="http://s3.amazonaws.com/libapps/accounts/27060/images/example.png" alt="example" class="logo"/>
</div>

please help me :( :D

A:

Update (better version):

.cd-header {
  position: relative;
  height: 180px;
  background-color: #331d35;
}

@media only screen and (min-width: 1170px) {
 .cd-header {
   height: 180px;
  }
}

.logo { 
  width: auto;
  height: auto;
  float:left;
  padding:22.5px 0px 0px 10px;
}

.banner-1{
  float:right;
  padding:50px 40px;
  width:728px;
  height:90px;
}

@media screen and (max-width: 1100px) {
.logo {
    width: auto;
    height: auto;
    float: none;
    padding: 22.5px 0px 0px 0px; /*to make it exactly to the center*/
}
   .banner-1 {
    display: none;
  }

div.logo{
margin: 0 auto;
width: 250px;
}
}
<html>
<head>

<title>test</title>

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> 

</head>
<body>

    <header class="cd-header">
  
  <div class="logo">
            <img src="http://www.gulfstreampark.com/images/default-source/racing-sponsors/pepsi-logo.png?sfvrsn=0" alt="CRED" class="logo"/>
  </div>
  

  <div class="banner-1">
   <img src="http://www.picz.ge/img/s2/1701/10/9/94310263d83b.png" alt="Banner Place"/>
  </div>
 
 </header>
  
</body>
</html>

