1

I'm trying to center and unordered list perfectly with the title of my website the title on top with the UL elements centered underneath.

The problem is that it does center, but not perfectly aligned with the overhead title. It is slightly to the right.

Here is my code:

.title{
  text-align: center;

}

nav{
  display: block;
  margin-left: auto;
  margin-right: auto; 
  width: 50%;
  background: blue;
}

li {
  text-align: center;
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: red;
}
4
  • 2
    No HTML? There is your problem right there! CSS needs HTML for it to work .. :P
    – LOTUSMS
    Dec 28, 2015 at 19:54
  • Also remove the default padding/margin that ul have.
    – Paulie_D
    Dec 28, 2015 at 19:56
  • Please provide your markup and also consider providing an example of the intended result.
    – hungerstar
    Dec 28, 2015 at 19:56
  • Questions seeking code help must include the shortest code necessary to reproduce it in the question itself. See How to create a Minimal, Complete, and Verifiable example
    – Paulie_D
    Dec 28, 2015 at 20:11

2 Answers 2

1
ul {
    padding: 0;
}

The slight right-side bias is because of the default padding the entire list gets, not the individual list items. Setting it to zero eliminates the unnecessary offset.

1
  • Thank you, this is exactly what I needed!
    – alexp2603
    Dec 28, 2015 at 20:49
0

I have to guess the HTML, but most likely you have a <ul> inside your <nav> element. Use this CSS:

nav > ul { margin-left: 0; padding-left: 0; } 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.