下拉菜单内容的宽度在它的按钮内不合适

Question

这是我第一次制作下拉菜单，我终其一生都无法让它无缝地融入其可见的菜单按钮中。我可以使右侧与主菜单按钮齐平，但左侧不想合作，请帮忙。

CSS：

/*MENU*/


.menu {margin-left: 1rem;
       margin-bottom: -15px;
       width: 100%; 
       height: 40px;}     

button {color: rgb(7, 1, 27); 
       font-size: 15px;
       background-color: rgb(234, 234, 248);
       font-family: parkroadfont; 
       letter-spacing: .2rem; 
       font-weight: italic; 
       margin-right: 30px; 
       margin-left: 30px;
       border: 20px, rgb(225, 1, 1);}
button:hover {color:rgb(225, 1, 1);}

a {text-decoration-line: none; 
   background-color: rgb(234, 234, 248);  
   color: rgb(7, 1, 27);}
a:hover {color:rgb(225, 1, 1);}


/*DROPDOWN MENU*/


.band {position: relative;
       display: flexbox;}
.drpdnmenu1 {display: none;
             position: absolute; 
             width: 167px;
             background-color: rgb(234, 234, 248);}
.band:hover .drpdnmenu1 {display:block;}
.one {padding: 5px 5px;
      background-color: rgb(234, 234, 248);
      font-size: 15px;
      border-style: groove;}

              
.music {position: relative;
        display: flexbox;}
.drpdnmenu2 {display: none;
             position: absolute; 
             width: 70px;
             background-color: rgb(234, 234, 248);}
.music:hover .drpdnmenu2 {display:block;}
.two {padding: 5px 5px;
      background-color:rgb(234, 234, 248);
      font-size: 15px;
      border-style: groove;}
                   

.contact {position: relative;
          display: flexbox;}
.drpdnmenu3 {display: none;
             position: absolute; 
             width: 130px;
             background-color: rgb(234, 234, 248);}
.contact:hover .drpdnmenu3 {display:block;}
.three {padding: 5px 5px;
        background-color:rgb(234, 234, 248);
        font-size: 15px;
        border-style: groove;}


.follow {position: relative;
          display: flexbox;}
.drpdnmenu4 {display: none;
             position: absolute; 
             width: 120px;
             background-color: rgb(234, 234, 248);}
.follow:hover .drpdnmenu4 {display:block;}
.four {padding: 5px 5px;
       background-color:rgb(234, 234, 248);
       border-style: groove;}
.four2 {font-size: 14px;
       border-style: groove;}


.upcoming {position: relative;
           display: flexbox;}
.drpdnmenu5 {display: none;
             position: absolute; 
             width: 138px;
             background-color: rgb(234, 234, 248);}
.upcoming:hover .drpdnmenu5 {display:block;}
.five {padding: 5px 5px;
      background-color:rgb(234, 234, 248);
      font-size: 15px;
      border-style: groove;}

HTML：

 <!--DROPDOWN MENU-->
 <div class="menu">
     <button class="band"><a href="#">MEET THE BAND</a>
         <div class="drpdnmenu1">
             <a href="/troyshana.html"><div class="one">SINGERS</a></div>
             <a href="/richard.html"><div class="one">KEYBOARDIST</a></div>
             <a href="/sean.html"><div class="one">GUITARIST</a></div>
             <a href="daddy.html"><div class="one">BASSIST</a></div>
             <a href="rick.html"><div class="one">DRUMMER</a></div> 
         </div>
 
     <button class="music"><a href="#">MUSIC</a>
         <div class="drpdnmenu2">
             <a href="/70's.html"><div class="two">70's</a></div>
             <a href="/80's.html"><div class="two">80's</a></div>
             <a href="/90's.html"><div class="two">90's</a></div>
             <a href="00's.html"><div class="two">00's</a></div>
         </div>
     <button class="contact"><a href="#">CONTACT US</a>
         <div class="drpdnmenu3">
             <a href="#"><div class="three">EMAIL</a></div>
         </div>
     <button class="follow"><a href="#">FOLLOW US</a>
         <div class="drpdnmenu4">
             <a href="#"><div class="four">FACEBOOK</a></div>
             <a href="#"><div class="four four2">INSTAGRAM</a></div>
         </div>
     <button class="upcoming"><a href="#">COME SEE US</a>
         <div class="drpdnmenu5">
             <a href="#"><div class="five">UPCOMING GIGS</a></div>
         </div>
     </button>
 </div>

我试过在子代码和主代码中调整边距、填充和边框，并尝试直接在 html 中设置代码样式，但没有任何帮助。