Can't center a UL

HTML/CSS
1

Trying to build the header of my existing site and relatively new to code but a fast learner and looking to use coding as i would in the real world.

For some reason, no matter what i do in terms of text-align or containing the UL in a container or div, it wont center the text on the page.

Heres the base code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <ul id="buttons">
      <li><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">PRODUCTS</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </body>
</html>

Heres my CSS code:

#buttons li {
    float: left;
    list-style: none;
    text-align: center;
    background-color: #ffffff;
    margin-right: 50px;
    size-adjust: 150px;
    line-height: 50px;
    border-radius: 5px;
    width: auto;

  }

#buttons li a {
    text-decoration: none;
    color: #000000;
    display: block;
  }
  
#buttons li a:hover {
    text-decoration: none;
    color: #898989;
    background-color: #ffffff;
  }

Heres my website for reference: www.deliberatemedia.com

2

I’d say you overcomplicated the problem, your margin pushed the box off the screen it’s good to check the inspect element in your browser to check if your spacing is distributed properly. Also float left pushes text to left I think which conflicts with text align. Also i wouldn’t use ID attribute for simple things, you should define a class instead, it overuses specificity and will cause problems if you have more complex designs.

CSS

.btn {
text-align: center;
}

li {
background-color: #ffffff;
border-radius: 5px;
list-style: none;
display: inline-block;
padding: 5rem;
}

#buttons li a {
text-decoration: none;
color: #000000;
display: block;
}

#buttons li a:hover {
text-decoration: none;
color: #898989;
background-color: #ffffff;
}

html

Document
4

I appreciate the quick response and the suggestions. Thanks! I’ll take another crack at it

5

I just did that on my end

        #buttons {
            display: flex;
            justify-content: center;
        }