title: (React) Margin auto not working for my pagination bar
body: <p>I am a beginner in Web Development.
  Why can't I place the pagination bar to be horizontally centered?
  I have tried to include width:100% and even display: block.
  However, results are the same.
  Thank you for your help.</p>
  <p><a href="https://i.stack.imgur.com/N1xqj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N1xqj.png" alt="Current Layout" /></a></p>
  <p>I want to put the pagination in the center of the red border.</p>
  <p>App.js</p>
  <pre><code> ...   
   &lt;Pagination postsPerPage={imagePerPage} totalPosts={totalImages} paginate= {paginate}/&gt;
   ...
  </code></pre>
  <p>Pagination.js</p>
  <pre><code>import React , { useState, useRef, useEffect, useContext } from 'react';
  import 'bootstrap/dist/css/bootstrap.min.css';
  
  const Pagination = ({ postsPerPage, totalPosts, paginate }) =&gt; {
  const pageNumbers = [];
  const [currentPage,setCurrentPage] = useState(1);
  
  for (let i = 1; i &lt;= Math.ceil(totalPosts / postsPerPage); i++) {
    pageNumbers.push(i);
  }
  
  const totalNumOfPages = pageNumbers.length;
  
  useEffect(() =&gt; {
  console.log(&quot;Cureent Page:&quot;)
  console.log(currentPage);
  
  },[currentPage]);
  
  return (
  &lt;nav&gt;
    &lt;ul className='pagination' style={{width:'100%',margin:'auto',border: '1px solid red' }}&gt;
        &lt;li class=&quot;page-item&quot;&gt;
        &lt;a class=&quot;page-link&quot; aria-label=&quot;Previous&quot;
           onClick={() =&gt;{ 
            if (currentPage &gt; 1){
            paginate(currentPage-1);
            setCurrentPage(currentPage-1);
            }
            }
          } 
        &gt;
          &lt;span aria-hidden=&quot;true&quot;&gt;&amp;laquo;&lt;/span&gt;
          &lt;span class=&quot;sr-only&quot;&gt;Previous&lt;/span&gt;
        &lt;/a&gt;
      &lt;/li&gt;
      {pageNumbers.map(number =&gt; (
      
        &lt;li key={number} 
            className={ `page-item ${(currentPage === number)? 'active' : '' }`}&gt;
          &lt;a onClick={() =&gt;{ paginate(number);setCurrentPage(number)}} className='page-link' &gt;
            {number}
          &lt;/a&gt;
        &lt;/li&gt;
      ))}
       &lt;li class=&quot;page-item&quot;&gt;
            &lt;a class=&quot;page-link&quot;  aria-label=&quot;Next&quot; 
                  onClick={() =&gt;{ 
                    if (currentPage &lt; totalNumOfPages){
                      paginate(currentPage+1);
                      setCurrentPage(currentPage+1);
                    }
                    }
                  } 
            &gt;
              &lt;span aria-hidden=&quot;true&quot;&gt;&amp;raquo;&lt;/span&gt;
              &lt;span class=&quot;sr-only&quot;&gt;Next&lt;/span&gt;
            &lt;/a&gt;
       &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  );
  };
  
  export default Pagination;
  </code></pre>