Center text in fixed element CSS

I have this code:

body {
    margin: 0;
}
.menu {
    background: black;
    height: 100vh;
    width: 240px;
    position: fixed;
    top: 0;
    color: white;
    z-index: 2;
    }
    
main {
      padding-left: 240px;
      text-align: center;
      }
      
main .footer {
   position: fixed;
   background-color: gray;
   bottom: 0;
   width: 100%;
   color: white;
   text-align: center; /* doesn't work? */
   }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="menu">Menu</div>
<main>
<h1>Example</h1>
<p>TEXT.</p>
<p>TEXT.</p>

<div class="footer">
  <p>Fixed footer with cented text.</p>
</div>

</main>
</body>
</html>

I don't know how it's possible, but I can't center that text in footer :/ It doesn't matter if you add text-align: center; to .footer or .footer p. Any ideas? Thanks.

Solution

Solution:

    body {
        margin: 0;
    }
    .menu {
        background: black;
        height: 100vh;
        width: 240px;
        position: fixed;
        top: 0;
        color: white;
        z-index: 2;
        }
        
    main {
          padding-left: 240px;
          text-align: center;
          }
          
    main .footer {
       position: fixed;
       background-color: gray;
       bottom: 0;
     /* del width: 100%; */
       color: white;
       text-align: center;
     /*  add this */
       left:240px;
       right:0;
       }

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="menu">Menu</div>
<main>
<h1>Example</h1>
<p>TEXT.</p>
<p>TEXT.</p>

<div class="footer">
  <p>Fixed footer with cented text.</p>
</div>

</main>
</body>
</html>

Thanks @Temani Afif