Why are my `
` buttons aligned to the left?

Question

I've tried using text-align:center for nav , ul , li but they have no effect of centering the buttons in the viewport. I've also tried nav {text-align: left;} . Doesn't work.

CSS codes:

  #container {
      width: 100%;
      background-color: black;
      margin-left: auto;
      margin-right: auto;}

 main {
        background-color: rgb(225, 234, 234);
        display: block;
        border-radius: 2em;
        border-top: medium solid powderblue;
        border-bottom:  medium solid powderblue;
        margin-left:  0.8em;
        margin-right: 0.8em;
        padding-top: 1em;
        padding-right: 0.5em;
        padding-bottom: 1em;
        padding-left: 0.5em;}

 .equip {
          width: 100%;
          margin-left: auto;
          margin-right: auto;}

 h1 {
    color: powderblue;
    text-align: center;
    font-size: 1.7em;
    font-family: cursive,fantasy,"Times New Roman";
    font-style: italic;
    white-space: nowrap;}


 nav ul {
          list-style-type: none;
          border-radius: 2em;}

 nav ul li { 
            text-align: center;
            padding-bottom: 0.3em;
            padding-top: 0.3em;
            border-color: powderblue;
            background-color: grey;
            margin-bottom: 0.5em;
            margin-top: 0.5em;
            border-radius: 3em;}

 nav a {
        color: white;
        font-family: "Times New Roman";
        font-size: 1.3em;
        white-space: nowrap;
        text-decoration: none;}


footer {
          margin-top: 1em;
          padding-bottom: 1em;
          text-align: center;
          font-size: 0.8em;
          color: white;}

HTML Code:

<!DOCTYPE html>
    <html lang="en-us">
    <head>
    <title>FFC|Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
    </head>
    
    
    <body>
    
    
    <div id="container">
    
    <header>
    
            <img  class="equip" src="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML Learn\Step-by-Step Guide\Forward Fitness Club\images\fitness club logo_grey_background.jpg"
    
                    alt="Forward Fitness Club ">
    
                 <h1>
                       Forward Fitness Club
                  </h1>
    
    </header>
    
    <nav>
            <ul>
                  <li> <a href="About Us.html"> About Us </a> </li>
                  <li> <a href="Classes.html"> Classes </a></li>
                  <li> <a href="About Us.html"> About Us </a></li>
                  <li> <a href="Nutrition.html"> Nutrition </a></li>
                  <li> <a href="Contact Us.html"> Contact Us </a></li>
    
            </ul>
    
    </nav>

    <main>
    
           <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness <b>AND</b> nutrition goals. <br>   </p> <!--<span style="font-weight: bold"> </span>-->
    
            <h2>  FREE ONE-WEEK TRIAL MEMBERSHIP</h2>
    
    
               <a href="Contact Us.html">Call Us today to Get Started</a> <br>
    
    
                  <h3>Fitness Club Hours</h3>
    
    <p>
    
    <ul style="list-style-type:none">
      <li style="text-align:left"> Monday-Thursday: 6:00am - 6:00pm</li>
      <li> Friday: 6:00am - 4:00pm</li>
      <li> Saturday: 8:00am - 6:00pm</li>
      <li> Sunday: Closed</li>
    </ul>
    
    </p>
    
    
    </main>
    
    <footer >
    
    <address>
               Copyright 2015. All Rights Reserved.<br>
    
             <a style="color:powderblue" href="ghanesh.t@gmail.com">forwardfitnessclub@gmail.com</a>
    
    </address>
    
    </footer>
    
    </div>
    
    </body>
    </html>

Image 1 : Samsung Galaxy Note 2 viewport

Image 2 : Desktop browser viewport

@PunithaSubramaniYoganyaaS I'm using the `
` element. i tried using it as a class `.main{ }` in the css code but doing that wouldn't display the main content at all in the browser. — SIVARAJ GHANESH A L THANASAGAR, Mar 31 '19 at 06:54
Hey @SIVARAJGHANESHALTHANASAGAR which elements exactly are you trying to center. — Bikash Das, Mar 31 '19 at 06:56
Yes, I viewed your code, What is your expected output? and how it is coming now? Because I tried it is coming in full view and texts are centered align. — Punitha Subramani, Mar 31 '19 at 06:57
@PunithaSubramaniYoganyaaS i'd like the buttons to be centered on the page but they aren't, in my browser. They're hugging the right margin. I'll add a screenshot image of how it looks like in my browser in the question. — SIVARAJ GHANESH A L THANASAGAR, Mar 31 '19 at 07:09
Your code is working fine for me as well. Do you have your CSS linked to your HTML? In your question, you don't have any CSS for your code snippet, which is why there is no styling being applied to it. — Nick, Mar 31 '19 at 07:13

score 3 · Accepted Answer · answered Mar 31 '19 at 07:12

An ul list has some default padding on the left. Try setting text-align: center and padding-left: 0 for nav ul:

#container {
  width: 100%;
  background-color: black;
  margin-left: auto;
  margin-right: auto;
}

main {
  background-color: rgb(225, 234, 234);
  display: block;
  border-radius: 2em;
  border-top: medium solid powderblue;
  border-bottom: medium solid powderblue;
  margin-left: 0.8em;
  margin-right: 0.8em;
  padding-top: 1em;
  padding-right: 0.5em;
  padding-bottom: 1em;
  padding-left: 0.5em;
}

.equip {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

h1 {
  color: powderblue;
  text-align: center;
  font-size: 1.7em;
  font-family: cursive, fantasy, "Times New Roman";
  font-style: italic;
  white-space: nowrap;
}

nav ul {
  text-align: center;
  padding-left: 0;
  list-style-type: none;
  border-radius: 2em;
}

nav ul li {
  text-align: center;
  padding-bottom: 0.3em;
  padding-top: 0.3em;
  border-color: powderblue;
  background-color: grey;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  border-radius: 3em;
}

nav a {
  color: white;
  font-family: "Times New Roman";
  font-size: 1.3em;
  white-space: nowrap;
  text-decoration: none;
}

footer {
  margin-top: 1em;
  padding-bottom: 1em;
  text-align: center;
  font-size: 0.8em;
  color: white;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <title>FFC|Home</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <link rel="stylesheet" href="stylesheet.css">
</head>


<body>


  <div id="container">

    <header>

      <img class="equip" src="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML Learn\Step-by-Step Guide\Forward Fitness Club\images\fitness club logo_grey_background.jpg" alt="Forward Fitness Club ">

      <h1>
        Forward Fitness Club
      </h1>

    </header>

    <nav>
      <ul>
        <li> <a href="About Us.html"> About Us </a> </li>
        <li> <a href="Classes.html"> Classes </a></li>
        <li> <a href="About Us.html"> About Us </a></li>
        <li> <a href="Nutrition.html"> Nutrition </a></li>
        <li> <a href="Contact Us.html"> Contact Us </a></li>

      </ul>

    </nav>

    <main>

      <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness <b>AND</b> nutrition goals. <br> </p>
      <!--<span style="font-weight: bold"> </span>-->

      <h2> FREE ONE-WEEK TRIAL MEMBERSHIP</h2>


      <a href="Contact Us.html">Call Us today to Get Started</a> <br>


      <h3>Fitness Club Hours</h3>

      <p>

        <ul style="list-style-type:none">
          <li style="text-align:left"> Monday-Thursday: 6:00am - 6:00pm</li>
          <li> Friday: 6:00am - 4:00pm</li>
          <li> Saturday: 8:00am - 6:00pm</li>
          <li> Sunday: Closed</li>
        </ul>

      </p>


    </main>

    <footer>

      <address>
               Copyright 2015. All Rights Reserved.<br>
    
             <a style="color:powderblue" href="ghanesh.t@gmail.com">forwardfitnessclub@gmail.com</a>
    
    </address>

    </footer>

  </div>

</body>

</html>

yeap, that did the trick,thanks! But I don't get why tho. I mean why is it padding and not margin? Because previously I tried `margin-left: 0;` `margin-right:0;` and it didnt work. — SIVARAJ GHANESH A L THANASAGAR, Mar 31 '19 at 07:20
It's just the indent of a default list. This default could also have been created with some `margin-left` on the list items (`ul li`). But I guess padding for the list itself would make more sense because it is only 1 element. A list with 50 items with margin to the left would probably take a very little more computing time. Not really something to break your head over. Just try to remember the browser adds some default `padding-left` to every `ul`, until you change it with css. — TVBZ, Mar 31 '19 at 07:26
Also,.. If you would give the ul itself a margin-left. Imagine you have a large text with some ul in between. When you would give the `ul` some `background-color`, it would not be nicely alligned with a `margin-left`. A `padding-left` fixes this. There are probably more reasons, but when you think about it, it makes more sence to have a default left padding on a list, then it would to have a left margin. An ul list also has some default margin. But that would be top and bottom. ;) — TVBZ, Mar 31 '19 at 07:34

I_Al-thamary · Answer 2 · 2019-03-31T07:04:35.557

It works if you put it as nav { text-align: center;}

 #container {
      width: 100%;
      background-color: black;
      margin-left: auto;
      margin-right: auto;}

 main {
        background-color: rgb(225, 234, 234);
        display: block;
        border-radius: 2em;
        border-top: medium solid powderblue;
        border-bottom:  medium solid powderblue;
        margin-left:  0.8em;
        margin-right: 0.8em;
        padding-top: 1em;
        padding-right: 0.5em;
        padding-bottom: 1em;
        padding-left: 0.5em;}

 .equip {
          width: 100%;
          margin-left: auto;
          margin-right: auto;}

 h1 {
    color: powderblue;
    text-align: center;
    font-size: 1.7em;
    font-family: cursive,fantasy,"Times New Roman";
    font-style: italic;
    white-space: nowrap;}


 nav ul {
          list-style-type: none;
          border-radius: 2em;}
          
          nav {  text-align: center;}
         main{  text-align: center;}
         address{  text-align: center;}

<!DOCTYPE html>
    <html lang="en-us">
    <head>
    <title>FFC|Home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="stylesheet.css">
    </head>
    
    
    <body>
    
    
    <div id="container">
    
    <header>
    
            <img  class="equip" src="D:\ghanesh\ghanesh\Y Combinator\Intern Summer 2019\interning Prep Course\HTML Learn\Step-by-Step Guide\Forward Fitness Club\images\fitness club logo_grey_background.jpg"
    
                    alt="Forward Fitness Club ">
    
                 <h1>
                       Forward Fitness Club
                  </h1>
    
    </header>
    
    <nav>
            <ul>
                  <li> <a href="About Us.html"> About Us </a> </li>
                  <li> <a href="Classes.html"> Classes </a></li>
                  <li> <a href="About Us.html"> About Us </a></li>
                  <li> <a href="Nutrition.html"> Nutrition </a></li>
                  <li> <a href="Contact Us.html"> Contact Us </a></li>
    
            </ul>
    
    </nav>

    <main>
    
           <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness <b>AND</b> nutrition goals. <br>   </p> <!--<span style="font-weight: bold"> </span>-->
    
            <h2>  FREE ONE-WEEK TRIAL MEMBERSHIP</h2>
    
    
               <a href="Contact Us.html">Call Us today to Get Started</a> <br>
    
    
                  <h3>Fitness Club Hours</h3>
    
    <p>
    
    <ul style="list-style-type:none">
      <li style="text-align:center"> Monday-Thursday: 6:00am - 6:00pm</li>
      <li> Friday: 6:00am - 4:00pm</li>
      <li> Saturday: 8:00am - 6:00pm</li>
      <li> Sunday: Closed</li>
    </ul>
    
    </p>
    
    
    </main>
    
    <footer >
    
    <address>
               Copyright 2015. All Rights Reserved.<br>
    
             <a style="color:powderblue" href="ghanesh.t@gmail.com">forwardfitnessclub@gmail.com</a>
    
    </address>
    
    </footer>
    
    </div>
    
    </body>
    </html>

i tried it but it still wouldn't align the buttons at the center. — SIVARAJ GHANESH A L THANASAGAR, Mar 31 '19 at 07:07
@SIVARAJGHANESHALTHANASAGAR You can run it here, everything is center now. — I_Al-thamary, Mar 31 '19 at 07:11

score 1 · Answer 3 · answered Mar 31 '19 at 07:22

1

Sometimes browser apply the default user stylesheet, If you missing the common styles to mention in your class.

Example I given

So my solution is, try to add padding in your code

padding: 0px

answered Mar 31 '19 at 07:22

Punitha Subramani

1,467
1
8
6

Why are my `` buttons aligned to the left?

3 Answers3

Why are my `
` buttons aligned to the left?