Increase Menu items distance

Probably its my first question in ASP.Net. I am new to Web-Programming and trying to learn it and reading book Wrox ASP.Net 4.0 for Beginners.

I was learning to create Menu Items by using Sitemap as datasource. I made menus and applied the datasource and it is working fine. My problem is, the book result has the menu items displayed with perfect distance. But my Menu items are like placed just beside each other means they don't cover the length of the page. Below images may help to understand.

My Image:

Book Output:

for datasource:

Here is my code for menu:

<asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" 
    DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
    StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="16px">
</asp:Menu?

Css Class

.MainMenu
    {
        border: 1px sol开发者_如何学JAVAid white;
        width: 814px;
        height: 19px;
        background-color : #cccccc;
        text-align : justify;
    }

So ultimately I want to increase the menu items distance like that of book. In my CssClass I even tried text-align : justify but its not working.

Thanks in advance.

You could try padding-right: 50px in your CSS class to make a padding of 50 pixels on the right of each item.

See this example/explanation for a short overview of the padding-right.

Adding this helped and solved my problem.

.MainMenu ul li
    {
        width: 200px;
    }

Thanks and sorry for bothering everyone.