My code is working fine in Firefox and Edge, but it's not displaying correctly in Chrome. Can anyone help me figure out what I'm doing wrong?
I am trying to create three boxes that should be displayed side by side across the full width of the div.
You can see how it looks in Firefox, and here is the rendering in Chrome.
I am new to coding so I might be overlooking something very obvious...
div.img2 {
display: table-cell;
border: 1px solid #ccc;
width: 30%;
margin: 5px;
}
div.img2:hover {
border: 1px solid #72bf44;
opacity: 0.8;
filter: alpha(opacity=25);
}
div.img2 img {
width: 50%;
height: 50%;
margin: 5px;
display: block;
margin-left: auto;
margin-right: auto
}
div.desc2 {
text-align: center;
}
.wrapper2{
position:relative;
overflow:hidden;
margin-bottom:10px;
}<div class="wrapper2">
<div class="img2" style="padding: 20px;"><a href="http://www.carritech.com/contact-us/general-enquiries/">
<img src="http://www.carritech.com/wp-content/uploads/2013/04/Enquiry.png" alt="General Enquiries" width="526px" height="526px" />
</a>
<div class="desc2">
<h3><strong><a href="http://www.carritech.com/contact-us/general-enquiries/">General Enquiries</a></strong></h3>
</div>
</div>
<div class="img2" style="padding: 20px;"><a href="http://www.carritech.com/request-a-quote/">
<img src="http://www.carritech.com/wp-content/uploads/2013/04/Quote.png" alt="Request a Quote" width="526px" height="526px" />
</a>
<div class="desc2">
<h3><strong><a href="http://www.carritech.com/request-a-quote/">Request a Quote</a></strong></h3>
</div>
</div>
<div class="img2" style="padding: 20px;"><a href="http://www.carritech.com/telecommunications-company-information/feedback/">
<img src="http://www.carritech.com/wp-content/uploads/2013/04/Feedback.png" alt="Customer Feedback" width="526px" height="526px" />
</a>
<div class="desc2">
<h3><strong><a href="http://www.carritech.com/telecommunications-company-information/feedback/">Leave Feedback</a></strong></h3>
</div>
</div>
</div>