Currently working on a website design, I'm trying to horizontally center align the link that contains an image. In my .css file, I specified a margin of 40 auto 50 auto within the .ad class, but the element remains aligned to the left. What could be causing this unexpected behavior?
/* style */
.banner {
width: 100%;
height: 520px;
/*overflow: hidden;*/
background-color: purple;
}
.nav {
width: 1200px;
margin: 0 auto;
height: 100px;
background-color: yellow;
}
.ad {
display: block;
width: 1198px;
height: auto;
margin: 40 auto 50 auto;
/*margin:0 auto;*/
border: 1px solid #e7e7e7;
}
/* common.css */
.a {
text-decoration: none;
}
.headerbg {
width: 100%;
height: 100px;
background-color: #fdfdfd;
}
.main {
width: 1200px;
margin: 0 auto;
/*overflow: hidden;*/
background-color: pink;
height: 100px;
}
.mt40 {
margin-top: 40px;
}index.html
<!--
<head>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
-->
<body>
<!-- header start -->
<div class="headerbg">
</div>
<!-- header end -->
<!-- banner start -->
<div class="banner">
</div>
<!-- banner end -->
<!-- nav start -->
<div class="nav">
</div>
<!-- nav end -->
<!-- main 1st content start -->
<div class="main mt40">
1 content
</div>
<!-- main 1st content end -->
<!-- main 2nd content start -->
<div class="main mt40">
2 content
</div>
<!-- main 2nd content end -->
<a href="#" class="ad">
<img src="#" width="1198" height="153">
</a>
</body>