WordPress自定义菜单对齐失效求助：多种尝试均无效

我正在尝试对齐WordPress自定义菜单元素，多次尝试多种方法均未成功。目前跟着教程制作主题，当前菜单效果如下：

附上主题相关代码，请帮忙排查错误：

主题样式文件（style.css） #

/* 
Theme Name: kushtech
Description: blog, shopping, my first wp theme
Author:Kush
Author URI: https://kusal.in/
Version:1.0.0
Text Domain: kusaldomain
Description: We are learning wordpress
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Requires at least: 5.3
Tested up to: 6.2
Requires PHP: 5.6


*/

Index.php 文件 #

<?php   
/*  

This template for displaying the header


*/
?>
<!DOCTYPE html>
<html lang="<?php language_attributes(); ?>" class="no-js">

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <?php  wp_head(); ?>
</head>

<body <?php body_class( ); ?>>
    <div id="header_area">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <a href="#"><img src="<?php echo get_theme_mod( 'kush_logo'); ?> " alt="logo"></a>
                </div>
                <div class="col-md-9">
                    <?php wp_nav_menu( array('theme_location' => 'main_menu', 'menu_id' => 'nav') ); ?>
                </div>
            </div>
        </div>
    </div>

    <?php wp_footer(); ?>
</body>

</html>

custom.css 文件 #

/* Common CSS */

img {
  max-width: 100%;
}

/* Header Area Style */

#headr_area {
  padding: 15px 0;
}

/*=======================================
 Common CSS
========================================*/
body {
  font-family: "Kaisei Decol", serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", sans-serif;
  line-height: 1.5em;
}
img {
  max-width: 100%;
}

/*=======================================
   Header Area Style
  ========================================*/
#header_area {
  padding: 15px 0;
}


#header_area .col-md-3 {
  margin: 0 40px;
}

#header_area .col-md-9 ul {
  font-family: "Oswald", sans-serif;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
#header_area .col-md-9 ul li {
  display: inline-block;
  position: relative;
}
#header_area .col-md-9 ul li a {
  color: #262626;
  padding: 20px 10px;
  display: block;
  text-transform: uppercase;
  text-decoration: none;
}
#header_area .col-md-9 ul li a:hover {
  background: #ea1a70;
  color: #fff;
}

/*Dropdown Menu*/
#header_area .col-md-9 ul li ul {
  background: #262626 none repeat scroll 0 0;
  left: -99999px;
  margin: 0;
  position: absolute;
  text-align: left;
  top: 62px;
  width: 200px;
}
#header_area .col-md-9 ul li:hover ul {
  left: 0px;
}
#header_area .col-md-9 ul li ul li {
  display: block;
}
#header_area .col-md-9 ul li ul li a {
  color: #fff;
  padding: 8px 10px;
}
#header_area .col-md-9 ul li ul li a:hover {
  background: #ddd;
  color: #262626;
}
#header_area .col-md-9 ul li:hover a {
  background: #ea1a70;
  color: #fff;
}
#header_area .col-md-9 ul li:hover ul li a {
  background: none;
  color: #fff;
}

/*Sub Dropdown Menu*/
#header_area .col-md-9 ul li ul ul {
  left: -99999px;
  top: 0;
  position: absolute;
}
#header_area .col-md-9 ul li:hover ul li ul {
  left: -999999px;
}
#header_area .col-md-9 ul li ul li:hover ul {
  left: 200px;
}
#header_area .col-md-9 ul li ul li:hover a {
  background: #ea1a70;
  color: #fff;
}
#header_area .col-md-9 ul ul li:hover ul li a {
  background: #262626;
  color: #fff;
}
#header_area .col-md-9 ul ul li ul li a:hover {
  background: #ea1a70;
  color: #fff;
}

functions.php 文件 #

<?php
/* 
My theme function

*/

// theme title

add_theme_support( 'title-tag ');

// Theme css and Jquary file clling

function kush_css_js_file_calling(){
    wp_enqueue_style( 'kush-style', get_stylesheet_uri() );
    wp_register_style('bootstrap', get_template_directory_uri().'/css/bootstrap.css', array(), '5.0.2', 'all');
    wp_register_style('custom', get_template_directory_uri().'/css/custom.css', array(), '1.0.0', 'all');
    wp_enqueue_style( 'bootstrap');
    wp_enqueue_style( 'custom');


    //jQuary Calling
    // wp_enqueue_script( $handle:string, $src:string, $deps:array, $ver:string|boolean|null, $in_footer:boolean )
    wp_enqueue_script( 'jquery' );
   
    wp_enqueue_script( 'bootstrap', get_template_directory_uri().'/js/bootstrap.js', array(), '5.0.2','true');
    wp_enqueue_script( 'main', get_template_directory_uri().'/js/main.js', array(), '1.0.0','true');
}

add_action( 'wp_enqueue_scripts', 'kush_css_js_file_calling');

// Google Fonts Enqueue
function kush_add_google_fonts() {
    wp_enqueue_style('kush-google_fonts', 'https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap', false);
}

add_action( 'wp_enqueue_scripts', 'kush_add_google_fonts');


// theme function

function kush_customizar_register($wp_customize){
    $wp_customize->add_section('kush_header_area', array(
        'title' => __('Header Area', 'kusaldomain'),
        'description' => 'If you interested to update your header area, you can do it here.'
    ));
    
    $wp_customize->add_setting('kush_logo',array(
        'default' => get_bloginfo('template_directory') . '/img/logo.png'
    ));

    $wp_customize-> add_control(new WP_Customize_Image_Control($wp_customize, 'kush_logo', array(
     'label' => 'Logo Upload', 
     'description' => 'If you interested to change or update your logo, you can do it here..',
     'settings' => 'kush_logo',
     'section' => 'kush_header_area',
    )));
    
}

add_action('customize_register','kush_customizar_register' );

//Menu Register
register_nav_menu( 'main_menu', __('Main Menu', 'kusaldomain'));


?>

问题排查与修复方案 #

从代码和效果来看，菜单对齐问题由以下几点导致，对应修复如下：

1. 栅格布局垂直对齐缺失
   修改Index.php中row标签，添加Bootstrap垂直居中类：

   <div class="row align-items-center">
   

2. 自定义margin破坏栅格结构
   删除custom.css中干扰布局的margin设置：

   #header_area .col-md-3 {
     margin: 0 40px; /* 删除此行 */
   }
   

   若需要logo与菜单的间距，改用padding-right替代margin。

3. 菜单容器垂直对齐调整
   替换custom.css中菜单ul的样式，确保与logo高度匹配：

   #header_area .col-md-9 ul {
     font-family: "Oswald", sans-serif;
     margin: 0; /* 替换原margin:10px 0 0 */
     padding: 0;
     list-style: none;
     display: flex;
     align-items: center;
     height: 100%;
     justify-content: flex-end;
   }
   

4. 拼写错误修正
   custom.css中存在错误选择器#headr_area（少写一个字母e），建议修正为#header_area，避免后续样式失效。

内容的提问来源于stack exchange，提问作者Kusal