Having trouble centering my menu bar on CSS, can anyone help?

I'm having trouble getting the buttons inside the menu bar to align properly. Does anyone have any suggestions on how to fix this?

I'm not very experienced with coding, so any assistance would be greatly appreciated!

.main-navigation {
   clear:both;
   display:block;
   float:left;
   width:100%;
 }

nav.main-nav .container {
   padding:0;
   text-align:right;
 }

.container {
   margin-left:auto;
   margin-right:auto;
   padding-left:15px;
   padding-right:15px;
 }

ul#primary-menu li a {
   color:#404040;
   font-size:14px;
   font-weight:100;
   letter-spacing:2px;
   margin-right:35px;
   text-decoration:none;
   text-transform:uppercase;
 }

ul#primary-menu > li > a {
   line-height:40px;
 }

.main-navigation a {
   display:block;
   text-decoration:none;
 }
cssmenucentering

Answer №1

For optimal results, insert the following code into your ".main-navigation". This will ensure that your menu bar is centered as long as its width remains at 100% of its parent element.

text-align: center;

Additionally, consider adding this code snippet to your ul element:

display: block;
<!-- if it's a horizontal menu -->
display: inline-block;

body, html{
        margin: 0;
        height: 100%;
    }
    .nav{
      width: 100%;
      height: 50px;
      background-color: black;
      text-align: center;

    }
    .nav ul{
      margin: 0;
      list-style-type: none;

    }
    .nav li{
      display: inline-block;
      border: 1px solid white;
      width: auto;
      height: 20px;
      margin-top: 10px;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    .nav a{
      text-decoration: none;
      color: white;
      transition: background-color 2s;
      transition: color 2s;
    }
<div class="nav">
      <ul>
          <li>
              <a href="#">Home</a>
          </li>

          <li>
              <a href="#">About Us</a>
          </li>

          <li>
              <a href="#">Contact Us</a>
          </li>
       </ul>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Responsive Bootstrap 5+ carousel featuring cards tailored to different viewport sizes

After an extensive search, I have come across numerous outdated questions and answers regarding my issue. With Bootstrap continuously evolving, I am hoping someone can help me with my specific requirement. I am in need of a carousel of cards that adjusts ...

htmlcsstwitter-bootstrapbootstrap-5

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

javascripthtmlcss

Issue with z-index in Internet Explorer version 7

Currently, I have implemented a drop-down list using jQuery that activates when the user hovers over the main menu. This functionality is working appropriately in all browsers except for IE7 and earlier versions. In an attempt to ensure the drop-down menu ...

htmlcssinternet-explorer-7z-index

Preventing special characters, numbers, and spaces from being used as the first character in a word in HTML with regular expressions

Is there a way to restrict users from inputting special characters, numbers, and spaces only in the first place of a word using regex in HTML? <label><span>Current Carrier</span></label> <input name='Current Carrier' t ...

javascriptc#htmlcssregex

Align two separate unordered lists together in the center

Would it be possible to align two separate UL elements next to each other horizontally? Here is the code that I am currently working with: <div id="container"> <ul id="list1"> <li></li> <li></li> ...

htmlcsshtml-listscentering

Swap out the string variable when it is modified

To generate a string inside the "code" variable that combines the selected image values, the final code should appear similar to: "test1/A=1a/B=1b" or "test2/A=1b/B=1a", etc. If the user modifies icon "A," it should replace the value in the code instead of ...

javascriptjquerycsshtml

Is it secure to use a unique, static HTML/CSS website?

As a web developer, I am currently working on hosting a Wordpress-website for a client. However, my frontend development skills have improved significantly and now I feel inspired to create a simpler and more customizable version on my own. This website i ...

jqueryhtmlcsssecurityweb

The importance of formatting in coding and how to effectively apply it

Why is proper code formatting so important for programmers? What are the benefits of following consistent formatting rules, and what exactly are these rules? Many programmers prefer to write their code like this: <html> <head> < ...

phphtmlcssformatting

Leveraging both onmouseover and onmouseout for container expansion

My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional ...

javascripthtmlcssonmouseoveronmouseout

Exploring the power of Angular by implementing nested ng-repeat functionalities:

I am currently working on an ng-repeat feature to add items from the array (album array). Everything seems to be functioning correctly. However, I also have a colors array that should assign different background-colors to the card elements of the album arr ...

javascripthtmlcssarraysangularjs

Leveraging the :checked state in CSS to trigger click actions

Is there a way to revert back to the unchecked or normal state when clicking elsewhere in the window, after using the :checked state to define the action for the clicked event? ...

htmlcss

Set restrictions on the element with a fixed position

My div has a position: fixed that scrolls correctly, but I want it to stop when it reaches specific y-axis boundaries. How can I achieve this without flickering and maintaining performance? The behavior of Twitter's right panel is similar to what I&ap ...

javascriptcsspositioncss-position

Steps for properly inserting a hyperlink:

I'm in need of assistance. I have a grid containing several images that I want to make clickable by adding anchor tags, but when I do this, the images seem to disappear completely. I suspect there's an issue with them being inside the container d ...

htmlcss

Tips for seamlessly placing a div with a background image within a parent container, all while preventing any scrolling issues as the child div rotates

I created a simple demo featuring a square image with rounded corners to give it a circular appearance. The image rotates slowly, but as it moves diagonally, the horizontal width fluctuates, causing the parent container to resize. I want the parent contain ...

htmlcss

What is the best way to adjust the content of a Bootstrap Column to be at the bottom of the column

Currently diving into the world of Bootstrap for my personal website, I'm encountering a challenge in aligning the content of my sidebar to the bottom. My quest for a solution led me through numerous threads without success. <!-- wordsmith: < ...

javascripthtmlcssbootstrap-5

Navigating a Bootstrap carousel with buttons: A step-by-step guide

Here is the code snippet I am currently working with: <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <link href="https://code.jquery.com/ui/1.11.4/them ...

jqueryhtmlcsstwitter-bootstrap

Resources for ExpressJS

New to ExpressJS and trying to figure out how to reference images stored in the /public/images/ directory in my /public/stylesheets/styles.css The code snippet below doesn't seem to be working for me: .home-bg { background-image:url('../ima ...

cssnode.jsexpress

I'm puzzled as to why the hidden input field consistently returns the same value every time

As a beginner in php, I am facing an issue where I cannot trace the correct value of the hidden input which represents the ID of the image in the products table. Every time I try to delete an image, it always returns the ID of the last image in the product ...

phphtmlcss

Problem with jQuery offset: SWF position remains unaffected

I attempted to create a code that would position an SWF file on top of an HTML button using jQuery's offset function to determine the coordinates. However, despite my efforts, the SWF does not appear to move as intended. var offset = $("#button").off ...

jquerycssoffset

Animating the Click Event to Change Grid Layout in React

Can a grid layout change be animated on click in React? For instance, consider the following component: import { Box, Button, styled, useMediaQuery } from "@mui/material"; import Row1 from "./Row1"; import React from "react"; ...

cssreactjstypescriptmaterial-ui