Javascript 移动菜单大小调整

我想要一个移动下拉菜单，但我的问题是，我的菜单中的项目之间没有添加空格。 我已经准备好了要改变维特，但是维特已经不在中心了。 应该是什么样子。 它实际上看起来怎么样

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（e）{
如果（！e.target.matches（'.dropbtn'））{
var myDropdown=document.getElementById（“myDropdown”）；
if（myDropdown.classList.contains（'show'））{
myDropdown.classList.remove（'show'）；
}
}
}

*{
边际0；
框大小：边框框；
颜色：#FFFFFF；
字体系列：“摩纳哥”、“门罗”、“康索拉斯”、monospace；
文本对齐：左对齐
}
身体{
填充：0 1.25em 1.25em 1.25em；
对齐项目：居中；
背景色：#1E；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
保证金：0
}
标题{
最大宽度：70%；
}
h1.标题下{
边缘顶部：0.25em；
边缘底部：0.25em；
字体大小：75%；
字距：-0.25em；
}
h1.标题下：：之前{
内容：无；
}
.集装箱{
溢出：隐藏；
背景色：#333；
字体系列：Arial
}
.货柜a{
浮动：左；
字号：1em；
颜色：白色；
文本对齐：居中；
填料：0.625em 1em；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏
}
.下拉菜单{
光标：指针；
字号：1em；
边界：无；
大纲：无；
颜色：白色；
填料：0.625em 1em；
背景色：继承；
}
/*.容器a：悬停，
.dropdown:悬停.dropbtn{
背景色：白色；
颜色：黑色
}*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#333；
最小宽度：10em；
/*长方体阴影：0em 0.5em 1em 0em rgba（0,0,0,0.2）*/
z指数：1
}
.下拉内容a{
浮动：左；
字号：1em；
颜色：白色；
文本对齐：居中；
填料：0.625em 1em；
文字装饰：无；
}
/*.下拉列表内容a：悬停{
背景色：#ddd
}*/
.表演{
显示：块
}

艾伦·皮亚克
java语言与C++语言

为此尝试使用引导，如移动视图，请使用

菜单项-1

菜单项-2

菜单项-3

---

现在一切都完成了，因为bootstrap将一行分成12列，您还可以单独调整它

我对HTML做了一些调整，使导航具有更严格的结构，并且我还添加了一些小的CSS更改，例如删除绝对位置和一些列表结构不需要的浮动

菜单现在应该居中并位于顶层链接下方

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
window.myFunction=function（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉列表之外单击，请关闭下拉列表
window.onclick=函数（e）{
如果（！e.target.matches（'.dropbtn'））{
var myDropdown=document.getElementById（“myDropdown”）；
if（myDropdown.classList.contains（'show'））{
myDropdown.classList.remove（'show'）；
}
}
}

*{
边际0；
框大小：边框框；
颜色：#FFFFFF；
字体系列：“摩纳哥”、“门罗”、“康索拉斯”、monospace；
文本对齐：左对齐
}
身体{
填充：0 1.25em 1.25em 1.25em；
对齐项目：居中；
背景色：#1E；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
保证金：0
}
标题{
最大宽度：70%；
}
h1.标题下{
边缘顶部：0.25em；
边缘底部：0.25em；
字体大小：75%；
字距：-0.25em；
}
h1.标题下：：之前{
内容：无；
}
.集装箱{
溢出：隐藏；
背景色：#333；
字体系列：Arial
}
.货柜a{
字号：1em；
颜色：白色；
文本对齐：居中；
填料：0.625em 1em；
文字装饰：无；
}
保险商实验室{
列表样式：无；
保证金：0；
填充：0；
}
李{
保证金：0；
填充：0；
}
李阿{
显示：块；
文本对齐：居中；
宽度：100%；
}
.下拉列表{
溢出：隐藏
}
.下拉菜单{
光标：指针；
字号：1em；
边界：无；
大纲：无；
颜色：白色；
填料：0.625em 1em；
背景色：继承；
}
/*.容器a：悬停，
.dropdown:悬停.dropbtn{
背景色：白色；
颜色：黑色
}*/
.下拉内容{
显示：无；
背景色：#333；
最小宽度：10em；
/*长方体阴影：0em 0.5em 1em 0em rgba（0,0,0,0.2）*/
z指数：1
}
.下拉内容a{
浮动：左；
字号：1em；
颜色：白色；
文本对齐：居中；
填料：0.625em 1em；
文字装饰：无；
}
/*.下拉列表内容a：悬停{
背景色：#ddd
}*/
.表演{
显示：块
}

艾伦·皮亚克
java语言与C++语言

您可以在

myDropdown

和

dropdown上使用
显示：flex
和
flex-direction:column

下面的片段


函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（e）{
如果（！e.target.matches（'.dropbtn'））{
var myDropdown=document.getElementById（“myDropdown”）；
if（myDropdown.classList.contains（'show'））{
myDropdown.classList.remove（'show'）；
}
}
}
*{
边际0；
框大小：边框框；
颜色：#FFFFFF；
字体系列：“摩纳哥”、“门罗”、“康索拉斯”、monospace；
文本对齐：居中；
}
身体{
填充：0 1.25em 1.25em 1.25em；
对齐项目：cen