How to center my hyperlinks on the webpage within a css drop down menu?

Question

I have created a drop-down menu using an external style sheet and html hyperlinks on a asp.net webform. I am trying to get the menu to centre on the webpage as the rest of the webform is centered. Here is my code so far.

/*Menu System Styles*/
.container {
    overflow: hidden;
    background-color: #0176C5;
    font-family: 'Tahoma', Geneva, sans-serif;
    text-align:center; 
}

.container a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    display:inline-block;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
}

.container a:hover, .dropdown:hover .dropbtn {
    background-color: #2ad32d;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

            <div class="container">
                <a href="home.aspx">Home</a>
                <div class="dropdown">
                    <button class="dropbtn">About Us</button>
                    <div class="dropdown-content">
                        <a href="#">Our Mission and Values</a>
                        <a href="LocalProjects.aspx">Local Projects</a>
                        <a href="NationalProjects.aspx">National & Worldwide Projects</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="dropbtn">News & Events</button>
                    <div class="dropdown-content">
                        <a href="#">Recent News</a>
                        <a href="Events.aspx">Upcoming Events</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="dropbtn">Prayer</button>
                    <div class="dropdown-content">
                        <a href="DiocesanPrayer.aspx">Diocesan Prayer Circle</a>
                        <a href="Prayer.aspx">Wave of Prayer</a>
                        <a href="IrelandPrayer.aspx">All Ireland Prayer Cycle</a>
                    </div>
                </div>
                <a href="home.aspx">Find a Branch</a>
                <a href="home.aspx">Contact Us</a>
                <a href="home.aspx">Resources</a>
                <a href="home.aspx">130 Celebration</a>
            </div>

Answer 1

I have modified your CSS code. I hope it helps.

/*Menu System Styles*/
.container {
    overflow: hidden;
    background-color: #0176C5;
    font-family: 'Tahoma', Geneva, sans-serif;
    text-align:center; 
}

.container a {
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    display:inline-block;
    vertical-align:top;
}

.dropdown {
    display:inline-block;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
}

.container a:hover, .dropdown:hover .dropbtn {
    background-color: #2ad32d;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

<div class="container">
                <a href="home.aspx">Home</a>
                <div class="dropdown">
                    <button class="dropbtn">About Us</button>
                    <div class="dropdown-content">
                        <a href="#">Our Mission and Values</a>
                        <a href="LocalProjects.aspx">Local Projects</a>
                        <a href="NationalProjects.aspx">National & Worldwide Projects</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="dropbtn">News & Events</button>
                    <div class="dropdown-content">
                        <a href="#">Recent News</a>
                        <a href="Events.aspx">Upcoming Events</a>
                    </div>
                </div>
                <div class="dropdown">
                    <button class="dropbtn">Prayer</button>
                    <div class="dropdown-content">
                        <a href="DiocesanPrayer.aspx">Diocesan Prayer Circle</a>
                        <a href="Prayer.aspx">Wave of Prayer</a>
                        <a href="IrelandPrayer.aspx">All Ireland Prayer Cycle</a>
                    </div>
                </div>
                <a href="home.aspx">Find a Branch</a>
                <a href="home.aspx">Contact Us</a>
                <a href="home.aspx">Resources</a>
                <a href="home.aspx">130 Celebration</a>
            </div>