0

text-align does not work

I want the words "Home" and "Academic Qualification" to be put on the leftmost. To my knowledge, div and li tags are called block elements, which takes the full width. Then, I don't know why I cannot align the words "Home" and "Academic Qualification". I sincerely appreciate your help. Thanks 

<style>
 .listAlign355{     
    text-align: left;
    background-color: blue;
  }
  li{
    list-style-type: none;
    text-align:left;
  }
</style>
<body>
   <header>
       <p>I am John.</p>
        <div class="listAlign355">         
           <ul>
              <li>Home</li>
               <li>Academic Qualification</li>
            </ul>
        </div>
    </header> 
</body>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
John Chau
  • 99
  • 6
  • I'm pretty sure this is a duplicate, but I can't seem to find an original with the same issue. – Mr Lister Jun 09 '19 at 13:00
  • Oh. I am sorry... I really tried to figure out through searching online for around 40 minutes but still not be able to figure it out and then I asked here. – John Chau Jun 09 '19 at 14:22

4 Answers4

1

You should set padding for ul. Because ul has default padding.

.listAlign355 {     
  text-align: left;
  background-color: blue;
}

/* I added */
ul {
  padding-left:0;
}

li {
  list-style-type: none;
  text-align:left;
}
  <header>
       <p>I am John.</p>
        <div class="listAlign355">         
           <ul>
              <li>Home</li>
               <li>Academic Qualification</li>
            </ul>
        </div>
    </header>
doğukan
  • 23,073
  • 13
  • 57
  • 69
1

You can remove ul default padding with padding-inline-start: 0;.

<style>
 .listAlign355{     
    text-align: left;
    background-color: blue;
  }
  li{
    list-style-type: none;
    text-align:left;
  }
  ul {
    padding-inline-start: 0;
  }
</style>
<body>
   <header>
       <p>I am John.</p>
        <div class="listAlign355">         
           <ul>
              <li>Home</li>
               <li>Academic Qualification</li>
            </ul>
        </div>
    </header> 
</body>
tcj
  • 1,645
  • 4
  • 13
  • 21
1

The list has a default padding so you can set it to zero to make it aligned to left 

 ul {
     padding-left:0;
    }

There is another suggestion to you to set the margin and padding for all items to zero and add the necessarily margin and padding for each item as you which without being confused with the default ones by adding this line of code

* {
  margin: 0;
  padding: 0;
}

* means all tags

Michael Gad
  • 25
  • 1
  • 5
0

Some elements have default margin or padding. <ul> in this case has a default padding-left. You can remove it by

ul{
     padding-left:0;
}

It would be a good practice to do the following style reset before you start styling. Add the following at the beginning of your CSS:

*{
   margin:0;
   padding:0;
   box-sizing:border-box;
 }

This would remove all the default margins and padding from every element, so that you have full control over the styling.

Robin Baby
  • 357
  • 1
  • 6