How to center main part of navbar?

I have a navbar which has 4 anchor tag buttons in the center (home, about, services, contact). I dont know how to center it on the navbar. I have another anchor tag on the far left of the navbar (a phone number link). It appears that the part I want to center is centered between the boundary of that far left link and the far right of the page.

I cant figure out how to center these 4 tags on the grid.

Hope that makes sense, im not too good with the jargon.

                                <a href="tel:1-530-680-8255"  style="color:grey; display:inline-block">1-530-680- 
                                        8255</a>

                                         <a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block"> 
                                          </i>1-530-680-8255</a>




                        </div>
                        <nav class="navigation nav-block secondary-navigation nav-right">
                            <ul>
                                <!-- Dropdown Cart Overview
                                <li>
                                    <div class="dropdown">
                                        <a href="#" class="nav-icon cart button no-page-fade"><span class="cart-indication"><span class="icon-shopping-cart"></span> <span class="badge">3</span></span></a>
                                        <ul class="dropdown-list custom-content cart-overview">
                                            <li class="cart-item">
                                                <a href="single-product.html" class="product-thumbnail">
                                                    <img src="images/design-agency/portfolio/grid/no-margins/project-6-square.jpg" alt="" />
                                                </a>
                                                <div class="product-details">
                                                    <a href="single-product.html" class="product-title">
                                                        Cotton Jump Suit
                                                    </a>
                                                    <span class="product-quantity">2 x</span>
                                                    <span class="product-price"><span class="currency">$</span>15.00</span>
                                                    <a href="#" class="product-remove icon-cancel"></a>
                                                </div>
                                            </li>
                                            <li class="cart-item">
                                                <a href="single-product.html" class="product-thumbnail">
                                                    <img src="images/design-agency/portfolio/grid/no-margins/project-7-square.jpg" alt="" />
                                                </a>
                                                <div class="product-details">
                                                    <a href="single-product.html" class="product-title">
                                                        Cotton Jump Suit
                                                    </a>
                                                    <span class="product-quantity">2 x</span>
                                                    <span class="product-price"><span class="currency">$</span>15.00</span>
                                                    <a href="#" class="product-remove icon-cancel"></a>
                                                </div>
                                            </li>
                                            <li class="cart-item">
                                                <a href="single-product.html" class="product-thumbnail">
                                                    <img src="images/design-agency/portfolio/grid/no-margins/project-8-square.jpg" alt="" />
                                                </a>
                                                <div class="product-details">
                                                    <a href="single-product.html" class="product-title">
                                                        Cotton Jump Suit
                                                    </a>
                                                    <span class="product-quantity">2 x</span>
                                                    <span class="product-price"><span class="currency">$</span>15.00</span>
                                                    <a href="#" class="product-remove icon-cancel"></a>
                                                </div>
                                            </li>
                                            <li class="cart-subtotal">
                                                Sub Total
                                                <span class="amount"><span class="currency">$</span>15.00</span>
                                            </li>
                                            <li class="cart-actions">
                                                <a href="cart.html" class="view-cart">View Cart</a>
                                                <a href="checkout.html" class="checkout button small"><span class="icon-check"></span> Checkout</a>
                                            </li>
                                        </ul>
                                    </div>
                                </li> -->
                                <!-- Dropdown Search Module
                                <li>
                                    <div class="dropdown">
                                        <a href="#" class="nav-icon search button no-page-fade"><span class="icon-magnifying-glass"></span></a>
                                        <div class="dropdown-list custom-content cart-overview">
                                            <div class="search-form-container site-search">
                                                <form action="#" method="get" novalidate>
                                                    <div class="row">
                                                        <div class="column width-12">
                                                            <div class="field-wrapper">
                                                                <input type="text" name="search" class="form-search form-element no-margin-bottom" placeholder="type &amp; hit enter...">
                                                                <span class="border"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </form>
                                                <div class="form-response"></div>
                                            </div>
                                        </div>
                                    </div>
                                </li> -->

                                <li>
                                        <div class="v-align-middle" style="margin-left: 60px;">
                                            <a href=""><i class="fab fa-facebook-f"></i></a>
                                        </div>
                                    </li>
                                    <li class="aux-navigation hide">
                                        <!-- Aux Navigation -->
                                        <a href="#" class="navigation-show side-nav-show nav-icon">
                                            <span class="icon-menu"></span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        <nav class="navigation nav-block primary-navigation nav-center">


                            <ul>
                                <li class="current"><a href="index.html">Home <i class="fas fa-home"></i></a></li>
                                <li class="current"><a href="index.html">About <i class="fas fa-at"></i></a></li>
                                <li class="current"><a href="index.html">Services <i class="fas fa-wrench"></i> </a></li>
                                <li class="current"><a href="index.html">Contact <i class="fas fa-phone"></i> </a></li>


                            </ul>

                        </nav>
                    </div>
                </div>
            </div>
        </header>

You can use floats to position elements side by side on the page and then play with the widths and padding to arrange them how you like. If you are unsure how to use CSS I suggest following some online tutorials.

nav ul {
  list-style-type: none;
  display: inline-block;
  margin: 0px;
  padding: 0px;
  width: 100%;
  
}

nav ul li {
  display: inline-block;
  text-align: center;
  width: 60px;
  margin: 0px;
  padding: 0px;
}

nav ul li span {
  font-size: 0.7em;
}

nav ul li i {
  font-size: 2em;
}

.left {
  width: 40%;
  float: left;
}

.right {
  width: 60%;
  float: right;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">



<nav>
  <div class="left">
    <p>000 000 0000</p>
  </div>
  <div class="right">
    <ul>
      <li><a href="#"><i class="fas fa-phone"></i><br><span>Contact</span></a></li>
      <li><a href="#"><i class="fas fa-wrench"></i><br><span>Services</span></a></li>
      <li><a href="#"><i class="fas fa-at"></i><br><span>About</span></a></li>
      <li><a href="#"><i class="fas fa-home"></i><br><span>Home</span></a></li>
    </ul>
  </div>
</nav>

/* Style the links inside the navigation bar */.topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px;} /* Change the color of links on hover */.topnav a:hover { background-color: #ddd; color: black;} /* Add a color to the active/current link */.topnav a.active


there is alot of existing css that came with this template. For me to run your css and html, it would change too many properties to the point where its unrecognizable. Despite that this is a perfect answer. HOWEVER: I took your css:

nav ul {
list-style-type: none;
display: inline-block;
margin: 0px;
padding: 0px;
width: 100%;

}

and i changed it to these values:

nav ul {
display: inline-block;
text-align: center;
width: 1100px;
margin: 200px;
padding: 200px;
 }

Its centered. But now the container is vertically huge. Need it the original height

Screenshot

Make a Website Make a Website (W3.CSS) Make a Website (BS3) Make a Website (BS4) Center Website Contact Section About Page Big Header Example Website Grid 2 Column Layout 3 Column Layout 4 Column Layout Expanding Grid List Grid View Mixed Column Layout Column Cards Zig Zag Layout Blog Layout


Ok lets start over. I just want to center these 4 anchor tag li's inside of this ul.

Is there someway I can wrap these four into one container, and then move them to the left with css? I just want those 4 items to appear centered in that ul.

Heres a picture of what im talking about

Below is my total header in html. Theres a lot of CSS so i dont know what to link people to but ill put what i have been playing with below.

<!-- Header -->
        <header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
            <div class="header-inner">
                <div class="row nav-bar">
                    <div class="column width-12 nav-bar-inner">
                        <div class="logo">
                            <div>


                                <a href="tel:1-530-680-8255"  style="color:grey; display:inline-block">1-530-680- 
                                        8255</a>

                                         <a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block"> 
                                          </i>1-530-680-8255</a>



                            </div>
                        </div>
                        <nav class="navigation nav-block secondary-navigation nav-right">
                            <ul>



                                    <li class="aux-navigation hide">
                                        <!-- Aux Navigation -->
                                        <a href="#" class="navigation-show side-nav-show nav-icon">
                                            <span class="icon-menu"></span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        <nav class="navigation nav-block primary-navigation nav-center">
                            <ul>

                                <li class="current"><a href="index.html">Home <i class="fas fa-home"></i></a></li>
                                <li class="current"><a href="index.html">About <i class="fas fa-at"></i></a></li>
                                <li class="current"><a href="index.html">Services <i class="fas fa-wrench"></i> </a></li>
                                <li class="current"><a href="index.html">Contact <i class="fas fa-phone"></i> </a></li>


                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <!-- Header End -->

---CSS---

nav ul li  {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
 }

I want to align in center of the navbar but because I have buttons on the right the center moves towards to left. Menu Center Contact Account Dropdown


.navbar a { float: left; padding: 12px; color: white; text-decoration: none; font-size: 17px; width: 25%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */ text-align: center; /* If you want the text to be centered */} /* Add a background color on mouse-over */.navbar a:hover { background-color: #000;}


Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.


I'm trying to align the first item on my navbar 'Alys', to the left while aligning everything else ('Contact', 'About', 'Shop') to always appear on the right of the navbar. I've tried using nth-child to select my second and subsequent list items, and floating them to the right, but that reverses the order of the list items.