我使用rotativa转换我的剃刀查看pdf文档，但有问题，它看起来不一样，当它渲染到网站这里是我的剃刀代码

@model PieListViewModel

@{
    Layout = null;
}

<link href="@("https://" + Context.Request.Host.ToString() + "/css/site.css")" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet' type='text/css'>
@* http://localhost:port/StyleSheet.css *@

<div class="container">
  <div class="grid">
    <div class="Weight border-left border-bottom">
      <span class="margin-left">Id</span>
    </div>
    <div class="Weight border-left border-bottom">
      <span class="margin-left">Name</span>
    </div>
    <div class="Weight border-left border-bottom">
      <span class="margin-left">Price</span>
    </div>
    <div class="Weight border-left border-bottom">
      <span class="margin-left">Actions</span>
    </div>
        @foreach (var pie in Model.Pies)
        {

                <div class="Weight border-left border-bottom">
                  <span class="margin-left">@pie.PieId</span>
                </div>
                <div class="Weight border-left border-bottom">
                 <span class="margin-left">@pie.Name</span>
                </div>
                <div class="Weight border-left border-bottom">
                 <span class="margin-left">@pie.Price</span>
                </div>
                <div class="border-bottom weight border-left" >
                    <a asp-controller="Pie" asp-action="Details" asp-route-id="@pie.PieId" class="actions ">Details</a>
                    <a asp-controller="Pie" asp-action="EditPie" asp-route-pieId="@pie.PieId" class="actions">Edit</a>
                    <a class="actions">Delete</a>
                 </div>
                     
        }
  </div>
  
    
</div>

css代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.border-bottom {
    border-bottom: solid 0.1rem rgb(142, 139, 139);
}
.container {
  width: auto;
  margin: 2rem 1rem;
}
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    justify-items: center;
}
.Weight {
  font-weight: 80%;
}
.border-left {
  border-left: solid 0.1rem rgb(142, 139, 139);
  width:100%;
  text-align:center;
}
.margin-left {
  margin-left: 0.5rem;
}
.actions {
  display: inline-block;
  color: rgb(241, 160, 7);
  text-decoration: underline;
}

网站图片

PDF渲染图像

它应该是相同的网站
111 1111 11111 111111 1111111 11111111 111111111 1111111111 11111111111