当移动到样式表时，布局混乱

我是ASP.NET的新成员，目前正在从William Penberthy着的书“Beginning ASP.NET with Visual Studio 2015”中学习。在关于使用母版页布局的第7章中，我使用样式表RentMyWrox创建了自定义母版页WebForms，并将页面ManagedItems.aspx的各种控件的内联样式移至RentMyWrox.css。这会导致布局混乱。当移动到样式表时，布局混乱

当我切换回默认母版页并将内联样式添加到默认Site.css样式表时，布局显示正确。我下载了本书的源代码，它有相同的问题。任何人都可以解释，这是什么问题？

我的自定义母版页WebForms.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="WebForms.master.cs" 
    Inherits="RentMyWrox.WebForms" %> 

<!DOCTYPE html> 

<html> 
<head runat="server"> 
    <title></title> 
    <asp:ContentPlaceHolder ID="head" runat="server"> 
    </asp:ContentPlaceHolder> 
    <link href="Content/RentMyWrox.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div id="header"> 

     </div> 
     <div id="nav"> 
      Navigation content here 
     </div> 
     <div id="section"> 
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> 

      </asp:ContentPlaceHolder> 
     </div> 
     <div id="footer"> 
      Footer content here 
     </div> 
    </form> 
</body> 
</html>

样式表自定义母版页RentMyWrox.css

body { 
    font-family: verdana; 
} 
#header { 
    background-color:#C40D42; 
    color:white; 
    text-align:center; 
    padding:5px; 
} 
#nav { 
    line-height:30px; 
    background-color:#eeeeee; 
    height:300px; 
    width:100px; 
    float:left; 
    padding:5px;   
} 
#section { 
    width:750px; 
    float:left; 
    padding:10px;   
} 
#footer { 
    background-color:#C40D42; 
    color:white; 
    clear:both; 
    text-align:center; 
    padding:5px;  
} 
.dataentry input{ 
    width: 250px; 
    margin-left: 20px; 
    margin-top: 15px; 
} 

.dataentry textarea{ 
    width: 250px; 
    margin-left: 20px; 
    margin-top: 15px; 
} 

.dataentry label{ 
    width: 75px; 
    margin-left: 20px; 
    margin-top: 15px; 
} 

#fuPicture { 
    margin-top: -20px; 
    margin-left: 120px; 
}

页ManagedItems.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/WebForms.Master" AutoEventWireup="true" CodeBehind="ManageItem.aspx.cs" Inherits="RentMyWrox.Admin.WebForm1" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 
    <div> 
     <div class="dataentry"> 
      <asp:Label ID="Label1" runat="server" Text="Name" 
       AssociatedControlID="tbName"></asp:Label> 
      <asp:TextBox ID="tbName" runat="server"></asp:TextBox> 
     </div> 
     <div class="dataentry"> 
      <asp:Label ID="Label2" runat="server" Text="Description" 
       AssociatedControlID="tbDescription"></asp:Label> 
      <asp:TextBox ID="tbDescription" runat="server" 
       TextMode="MultiLine" Rows="5"></asp:TextBox> 
     </div> 
     <div class="dataentry"> 
      <asp:Label ID="Label3" runat="server" Text="Cost" 
       AssociatedControlID="tbCost"></asp:Label> 
      <asp:TextBox ID="tbCost" runat="server"></asp:TextBox> 
     </div> 
     <div class="dataentry"> 
      <asp:Label runat="server" Text="Item Number" AssociatedControlID="tbItemNumber"/> 
      <asp:TextBox runat="server" ID="tbItemNumber" /> </div> <div class="dataentry"> 
      <asp:Label runat="server" Text="Picture" AssociatedControlID="fuPicture" /> 
      <asp:FileUpload ID="fuPicture" ClientIDMode="Static" runat="server" /> 
     </div> 
     <div class="dataentry"> 
      <asp:Label runat="server" Text="Acquired Date" AssociatedControlID="tbAcquiredDate"/> 
      <asp:TextBox runat="server" ID="tbAcquiredDate"/> 
     </div> 
     <asp:Button Text="Save Item" runat="server" OnClick="SaveItem_Click" /> 
    </div> 

</asp:Content>

这是它应该如何看根据书