I have ths code:
<style type="text/css">
.product_page {
height: 297mm !important;
min-height: 297mm !important;
max-height: 297mm !important;
width: 210mm !important;
max-width: 210mm !important;
min-width: 210mm !important;
background: green;
}
.product_header {
width: 100% !important;
height: 17mm !important;
background: #000;
}
.product_footer {
width: 100% !important;
height: 10mm !important;
background: #000;
}
.product_box {
margin: 5mm !important;
width: 200mm !important;
min-width: 200mm !important;
max-width: 200mm !important;
height: 260mm !important;
min-height: 260mm !important;
max-height: 260mm !important;
background: yellow;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.product_item {
width: 50% !important;
max-width: 50% !important;
min-width: 50% !important;
height: 75mm !important;
min-height: 75mm !important;
max-height: 75mm !important;
background: #ccc;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.product_photo {
width: 50% !important;
max-width: 50% !important;
min-width: 50% !important;
height: 75mm !important;
min-height: 75mm !important;
max-height: 75mm !important;
background: red;
display: inline-block;
}
.product_info {
width: 50% !important;
max-width: 50% !important;
min-width: 50% !important;
height: 75mm !important;
min-height: 75mm !important;
max-height: 75mm !important;
background: pink;
display: inline-block;
}
</style>
<div class="product_page">
<div class="product_header"></div>
<div class="product_box">
<div class="product_item">
<div class="product_photo"></div>
<div class="product_info"></div>
</div>
<div class="product_item">
<div class="product_photo"></div>
<div class="product_info"></div>
</div>
<div class="product_item">
<div class="product_photo"></div>
<div class="product_info"></div>
</div>
</div>
<div class="product_footer"></div>
</div>
As you can see 3rd product_item class is outside of max-width - which is 200mm ... WHy? How to fix that?
