How can I add make my html shift a bit to the left

Question

I have this code but it looks weird.
Authors and date are shifted a bit to the left and I want to center them.

To center them using this element but I had no luck.

style="text-align: center;"

What can I do?

<base href="https://acanhs.org/" />

<style>
  img.article {
    float: left;
    width: 300px;
    height: 300px;
    object-fit: cover;
  }
  
  a:link {
    color: Black;
    background-color: transparent;
    text-decoration: none;
  }
  
  a:visited {
    color: Black;
    background-color: transparent;
    text-decoration: none;
  }
  
  a:hover {
    color: Black;
    background-color: transparent;
    text-decoration: none;
  }
  
  a:active {
    color: Black;
    background-color: transparent;
    text-decoration: none;
  }
</style>
<link rel="stylesheet" href="bootstrap.min.css" />
<style>
  .btn {
    width: 150px;
    height: 150px;
    background: #ddd;
    position: relative;
    text-align: center;
    margin: 15px;
    overflow: hidden;
    border-radius: 100%;
    display: inline-block;
  }
  
  .btn.download {
    background: #00CCFF;
  }
  
  .btn.download .cloud {
    box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
  }
  
  .btn.download .arrow {
    -webkit-animation: download 1s linear infinite;
    animation: download 1s linear infinite;
  }
  
  .btn.upload {
    background: #F49845;
  }
  
  .btn.upload .cloud {
    box-shadow: 0px 0px #f17d15, 1px 1px #f17d15, 2px 2px #f17d15, 3px 3px #f17d15, 4px 4px #f17d15, 5px 5px #f17d15, 6px 6px #f17d15, 7px 7px #f17d15, 8px 8px #f17d15, 9px 9px #f17d15, 10px 10px #f17d15, 11px 11px #f17d15, 12px 12px #f17d15, 13px 13px #f17d15, 14px 14px #f17d15, 15px 15px #f17d15, 16px 16px #f17d15, 17px 17px #f17d15, 18px 18px #f17d15, 19px 19px #f17d15, 20px 20px #f17d15, 21px 21px #f17d15, 22px 22px #f17d15, 23px 23px #f17d15, 24px 24px #f17d15, 25px 25px #f17d15, 26px 26px #f17d15, 27px 27px #f17d15, 28px 28px #f17d15, 29px 29px #f17d15, 30px 30px #f17d15, 31px 31px #f17d15, 32px 32px #f17d15, 33px 33px #f17d15, 34px 34px #f17d15, 35px 35px #f17d15, 36px 36px #f17d15, 37px 37px #f17d15, 38px 38px #f17d15, 39px 39px #f17d15, 40px 40px #f17d15, 41px 41px #f17d15, 42px 42px #f17d15, 43px 43px #f17d15, 44px 44px #f17d15, 45px 45px #f17d15, 46px 46px #f17d15, 47px 47px #f17d15, 48px 48px #f17d15, 49px 49px #f17d15, 50px 50px #f17d15;
  }
  
  .btn.upload .arrow {
    -webkit-animation: uplaod 1s linear infinite;
    animation: uplaod 1s linear infinite;
  }
  
  .btn.upload .arrow:after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent #97CA03 transparent;
  }
  
  .cloud {
    width: 100px;
    height: 40px;
    position: relative;
    background: #fff;
    display: inline-block;
    border-radius: 50px;
    margin: 60px auto 0;
    box-shadow: 0px 0px #00a3cc, 1px 1px #00a3cc, 2px 2px #00a3cc, 3px 3px #00a3cc, 4px 4px #00a3cc, 5px 5px #00a3cc, 6px 6px #00a3cc, 7px 7px #00a3cc, 8px 8px #00a3cc, 9px 9px #00a3cc, 10px 10px #00a3cc, 11px 11px #00a3cc, 12px 12px #00a3cc, 13px 13px #00a3cc, 14px 14px #00a3cc, 15px 15px #00a3cc, 16px 16px #00a3cc, 17px 17px #00a3cc, 18px 18px #00a3cc, 19px 19px #00a3cc, 20px 20px #00a3cc, 21px 21px #00a3cc, 22px 22px #00a3cc, 23px 23px #00a3cc, 24px 24px #00a3cc, 25px 25px #00a3cc, 26px 26px #00a3cc, 27px 27px #00a3cc, 28px 28px #00a3cc, 29px 29px #00a3cc, 30px 30px #00a3cc, 31px 31px #00a3cc, 32px 32px #00a3cc, 33px 33px #00a3cc, 34px 34px #00a3cc, 35px 35px #00a3cc, 36px 36px #00a3cc, 37px 37px #00a3cc, 38px 38px #00a3cc, 39px 39px #00a3cc, 40px 40px #00a3cc, 41px 41px #00a3cc, 42px 42px #00a3cc, 43px 43px #00a3cc, 44px 44px #00a3cc, 45px 45px #00a3cc, 46px 46px #00a3cc, 47px 47px #00a3cc, 48px 48px #00a3cc, 49px 49px #00a3cc, 50px 50px #00a3cc;
  }
  
  .cloud:after,
  .cloud:before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    top: -20px;
    background: #fff;
    left: 5px;
  }
  
  .cloud:before {
    width: 40px;
    height: 40px;
    left: 50px;
  }
  
  .arrow {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 5;
    top: 10px;
    width: 15px;
    height: 10px;
    background: #97CA03;
    display: inline-block;
  }
  
  .arrow:after {
    content: '';
    position: absolute;
    left: -8px;
    top: 100%;
    border: 15px solid transparent;
    border-top-color: #97CA03;
  }
  
  @-webkit-keyframes download {
    0% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
    }
    100% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      opacity: 0;
    }
  }
  
  @keyframes download {
    0% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
    }
    100% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
      opacity: 0;
    }
  }
  
  @-webkit-keyframes uplaod {
    0% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
    }
    100% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      opacity: 0;
    }
  }
  
  @keyframes uplaod {
    0% {
      -webkit-transform: translateY(20px);
      transform: translateY(20px);
    }
    100% {
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
      opacity: 0;
    }
  }
</style>


<link rel="stylesheet" href="templatemo-stand-blog.css">

<img src="logo.png" width="100" height="100" alt="HTML tag">
<p class="bluebackground">&emsp;</p>
<nav>
  <ul class="nav">
    <li class="navlist"><a class="active" href="index.html">Home</a></li>
    <li class="navlist"><a class="active" href="boyshome.html">Boys Campus</a></li>
    <li class="navlist"><a class="active" href="girlshome.html">Girls Campus</a></li>
    <li class="navlist"><a class="active" href="calculator.html">GPA Calculator</a></li>
  </ul>
</nav>
<p class="bluebackground">&emsp;</p>
<br>
<h1 class="girls-message centermess">
  <center>NHS BOYS</center>
</h1>
<nav>
  <p class="bluebackground">&emsp;</p>
  <ul class="nav">
    <li class="navlist"><a class="active" href="boyshome.html">Home</a></li>
    <li class="navlist"><a class="active" href="nhs-articles.html">NHS Articles</a></li>
    <li class="navlist"><a class="active" href="meet-our-officers-boys.html">Meet Our Officers</a></li>
    <li class="navlist"><a class="active" href="boyscontact.html">Contact Us</a></li>
  </ul>
</nav>
<p class="bluebackground">&emsp;</p>
<br>
<br>
<h1 style="text-align: center;">NHS ARTICLES</h1>

<center>
  <section class="blog-posts grid-system">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="all-blog-posts">
            <center>
              <div class="row">
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Fitness.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>Fitness</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Mohammad Al-Wazzan</li>
                        <br>
                        <li style="text-align: center;">Wednesday, November 3, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Fitness.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الأمير.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>الأمير الراحل … أمير الإنسانية</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Mohammad Al-Mutair</li>
                        <br>
                        <li style="text-align: center;">Saturday, October 3, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الأمير الراحل … أمير الإنسانية.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Uyghur.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>Uyghur Muslims</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Khalid Kooheji</li>
                        <br>
                        <li style="text-align: center;">Sunday, September 27, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Uyghur Muslims.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/Corona.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>Corona Virus: A New World</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Majed Al-Shaheen</li>
                        <br>
                        <li style="text-align: center;">Sunday, September 27, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/Corona Virus A New World.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/اقرأ.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>التعلم عبادة</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Omar Sheir</li>
                        <br>
                        <li style="text-align: center;">Wednesday, September 23, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/التعلم عبادة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>
                      <div class="post-options">
                        <div class="row">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-lg-4">
                  <div class="blog-post">
                    <div class="blog-thumb">
                      <img src="articlepics/الصدقة.jpg" alt="" class="article">
                    </div>
                    <div class="down-content">
                      &emsp;
                      <h4>الصدقة</h4>
                      <ul class="post-info">
                        <li style="text-align: center;">Ahmad Al-Mazrouei</li>
                        <br>
                        <li style="text-align: center;">Sunday, September 20, 2020</li>
                      </ul>
                      <div class="btn download" onclick="window.location='articlepdfs/الصدقة.pdf';">
                        <div class="cloud">
                          <div class="arrow"></div>
                        </div>
                      </div>

I tried to make you a snippet – mplungjan Oct 15 '20 at 10:52 — mplungjan, Oct 15 '20 at 10:52

score 1 · Accepted Answer · edited Oct 15 '20 at 11:20

1

Your <ul> with class post-info seems to have a default-padding on the left. Just add padding-left: 0; to this class.

edited Oct 15 '20 at 11:20

CoderUni

5,474
7
26
58

answered Oct 15 '20 at 10:53

dominikjosch

119
1
5

score 0 · Answer 2 · answered Oct 15 '20 at 10:58

Your ul element is implementing a default left padding of 40px, causing the offset.

Simply add a style to your post-info class that removes this:

ul.post-info {
    padding-left: 0;
}

This SO post describes the same issue with the default padding on the ul: Does UL have default margin or padding

score 0 · Answer 3 · edited Oct 26 '20 at 10:42

0

I went through your code and you want that div in the center, so I suggest you just add two more div beside your column div. it'll be in the center.

<div class=col-lg-2></div>
<div class=col-lg-4></div>
<div class=col-lg-4></div>
<div class=col-lg-2></div>

edited Oct 26 '20 at 10:42

Not A Bot

2,474
2
16
33

answered Oct 15 '20 at 11:22

Shivam malviya

1
2

How can I add make my html shift a bit to the left

3 Answers3