How to center title in media dimensions?

Question

I want to place a media size centered in regular size, and when I change its max-width to 480, the header is on the left.

But it sticks to the left. How can I change the code so that the title is in the middle when the media is resized?

caption {
   font-family: "Rock Salt", cursive;
   padding: 20px;
   font-style: italic;
   caption-side: Top;
   color: #666;
   text-align: center;
   letter-spacing: 1px;
 }




@media only screen and (max-width: 480px) {
  caption {
    caption-side: Top;
    text-align: center;
    letter-spacing: 1px;
  }

<section id="right"> 
        <table> 
           <caption>Books everyone will enjoy!</caption> 
           <thead> 
              <th colspan="4">Recommended childrens books!</th> 
              <th colspan="2" style="display: none">Recommended childrens books!</th> 
              <tr> 
                 <th colspan="1">Front of the book</th> 
                 <th colspan="1">Title of the book</th> 
                 <th colspan="1">Authors</th> 
                 <th colspan="1">Book Summary</th> 
             </tr> 
           </thead>

Answer 1

You need to center the block element:

@media only screen and (max-width: 480px) {
   caption {
      caption-side: Top;
      text-align: center;
      letter-spacing: 1px;
      margin:0 auto;
}