I'm having trouble aligning the div element with the .slider class horizontally. The margin: 0 auto; property doesn't seem to be working. Additionally, I would like to know how to make the slider image responsive.
/* CSS Document */
.header {
background-image: URL("images/header_top.png");
height: 80px;
}
.logo {
float: left;
background-image: URL("images/header_logo.png");
color: white;
background-repeat: no-repeat;
height: 84px;
width: 264px;
}
body {
margin: 0px 0px 0px 0px;
background-image: URL("images/bg_blueprint.jpg");
width: 100%;
}
.container-main {
width: 100%;
text-align: center;
}
.slider {
background-image: URL("images/slider_photo.png");
background-repeat: no-repeat;
margin: 0 auto;
float: none;
height: 482px;
max-width: 100%;
}<body>
<div class="container-main">
<div class="pure-u-1 pure-u-md-1 header">
<div class="logo"></div>
</div>
<div class="slider"></div>
</div>
</body>