菜单布局问题

Question

我正在使用XML，ASP创建菜单。网络和CSS |问题是-菜单的布局不是固定的，就像“对齐”对齐一样。我的问题是菜单应该左对齐。
我正在插入XML文件，CSS和ASP.Net代码文件的代码。
XML文件

<?xml version="1.0" encoding="utf-8" ?>
<Menus>
  <Menu Url="~/Home.aspx" Text="Home" Value="Home Page" />
  <Menu Url="javascript:;" Text="Services" Value="Services Page">
    <SubMenu Url ="~/Consulting.aspx" Text="Consulting" Value="Consulting Page"></SubMenu>
    <SubMenu Url ="~/Outsourcing.aspx" Text="Outsourcing" Value="Outsourcing Page"></SubMenu>
  </Menu>
  <Menu Url="~/About.aspx" Text="About" Value="About Us Page" />
  <Menu Url="~/Contact.aspx" Text="Contact" Value="Contact Us Page" />
</Menus>

ASP代码
这是ASP代码文件（母版页文件）

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" DataSourceID="XmlDataSource1">
    <DataBindings>
        <asp:MenuItemBinding DataMember="Menu" TextField="Text" ValueField="Value"
            NavigateUrlField="Url" />
        <asp:MenuItemBinding DataMember="SubMenu" TextField="Text" ValueField="Value"
            NavigateUrlField="Url" />
    </DataBindings>
    <LevelMenuItemStyles>
        <asp:MenuItemStyle CssClass="main_menu" />
        <asp:MenuItemStyle CssClass="level_menu" />
    </LevelMenuItemStyles>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/Files/menus.xml" XPath="/Menus/Menu">
</asp:XmlDataSource>

CSS文件
我在代码中使用的一个简单CSS是

.main_menu, .main_menu:hover
{
width: 100px;
color: #333;
text-align: center;
height: 30px;
line-height: 30px;
display: inline-block;
}
.main_menu:hover
{
background-color: #ccc;
}
.level_menu, .level_menu:hover
{
width: 110px;
background-color: #fff;
color: #333;
text-align: center;
height: 30px;
line-height: 30px;
margin-top: 5px;
}
.level_menu:hover
{
background-color: #ccc;
}

输出：

预期输出：