I cannot configure PDF using Page Print - html

Question

I'm creating a report using html and CSS.
I'm not able to make the PDF view equal to the html in an expressed way.
My page looked like this:
![enter image description here][1]
In PDF it didn't look like HTML:
I tried:
<style>
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 12cm;
height: 100%;
}
page[size="A4"][layout="landscape"] {
width: 29.7cm;
/*height: 21cm;*/
}
</style>
HTML:
<page size="A4">
<div class="container body-content">
<table class="table table-bordered table-condensed" style="margin-top: -22px">
<tbody>
<tr style="">
<td style="border: 1px solid #ffffff !important; padding-top: 13px;">
<div class="row">
<div class="col col-xs-6" style="margin-top: 14px;margin-bottom:1%; padding-right: 0px;">
<div class="col-md-12">
<img class="pull-right border-solid-1 img-prod" src="#itens.xFileImagePrincipal" alt="">
</div>
</div>
<div class="col col-xs-5 col-md-2" style="padding-left: 0px; ">
<div class="col-md-12 border-solid-1" style="padding-left: 20px; min-height: 200px !important; margin-top: 14px !important;">
#*TODO: Modelo*#
<div class="row p-t-10">
<h6><strong>Cód.:</strong> <strong style="font-size: 17px !important;">#itens.xCodAlternativo</strong></h6>
</div>
<div class="row margem p-r-10">
<h6><strong>Descrição: #itens.xDetalhes</strong></h6>
</div>
<div class="row produto p-t-5">
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela1Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela2))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela2Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela3))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela3Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela4))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela4Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela5))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela5Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela6))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela6Formatado / #itens.xUnidadeMedida</strong>
</div>
}
#if (!string.IsNullOrEmpty(itens.xTabela7))
{
<div class="row" style="padding-top: 10px;">
<strong class="color-red">Preço: R$ #itens.vlrTabela7Formatado / #itens.xUnidadeMedida</strong>
</div>
}
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
I've tried everything and researched a lot about it, but I didn't get any results. Final result:

Answer 1

An A4 page is 21cm (210mm) wide, which is hard-coded to be that wide in portrait.
The page should not be assigned as size A4 when you don't need it:
page {
width: 12cm;
// ...
}
So, removing [size="A4"].
Reference: CSS page size at MDN