Ich möchte eine Mediengröße zentriert in normaler Größe platzieren, und wenn ich die maximale Breite auf 480 ändere, befindet sich die Kopfzeile auf der linken Seite.

Aber es bleibt links hängen. Wie kann ich den Code so ändern, dass der Titel in der Mitte steht, wenn die Größe des Mediums geändert wird?

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>