Javascript 根据另一个元件的尺寸安装一个元件

我试图在头球标题上加上两个div，但我似乎无法让它发挥作用。我不确定calc（）是否与javascript配合良好。以下是迄今为止的代码：

document.getElementByClass（'Header'）.clientWidth
：根目录{
--主色调：#3500D3；
--主背景颜色：282828；
--次要背景颜色：#0c0032；
--主要内容背景颜色：#190061；
--文本颜色：#ffffff；
--alt颜色：#240090；
}
* {
框大小：内容框；
保证金：0；
}
身体{
背景色：var（--主背景色）；
}
h1{
字体系列：robot0，无衬线；
字体大小：70px；
字号：100；
字体变体：小帽子；
颜色：var（--文本颜色）；
}
.标题{
背景色：var（--主背景色）；
宽度：100%；
高度：100px；
排名：0；
保证金：0；
位置：固定；
文本对齐：居中；
z指数：10；
边框底部：5px实心变量（--主强调色）；
}
.标题标题{
框大小：内容框；
背景色：var（--主背景色）；
高度：85px；
宽度：500px；
保证金：自动；
垂直对齐：中间对齐；
填充顶部：50px；
填充顶部：20px；
左边框：5px实心变量（--主强调色）；
右边框：5px实心变量（--主强调色）；
z指数：11
}
.标题信息{
宽度：计算（（客户端宽度-500）/2）；
高度：100px；
显示：内联块；
位置：绝对位置；
保证金：0；
填充：0；
}
#正确信息{
右：计算（（（客户端宽度-500）/2）+500）；
}
#左信息{
右：0；
}

网页
document.getElementByClass（'header'）.clientWidth；
欢迎

你好


你好

我觉得你把事情弄得太复杂了。我删除了很多代码并添加了标题。侧边的两个div都允许在空间允许的范围内移动


：根目录{
--主色调：#3500D3；
--主背景颜色：282828；
--次要背景颜色：#0c0032；
--主要内容背景颜色：#190061；
--文本颜色：#ffffff；
--alt颜色：#240090；
}
* {
框大小：内容框；
保证金：0；
}
身体{
背景色：var（--主背景色）；
}
h1{
字体系列：robot0，无衬线；
字体大小：70px；
字号：100；
字体变体：小帽子；
颜色：var（--文本颜色）；
}
.标题{
宽度：100%；
高度：100px；
排名：0；
位置：固定；
边框底部：5px实心变量（--主强调色）；
显示器：flex；
对齐项目：居中；/*垂直对齐*/
}
.标题标题{
宽度：500px；
左边框：5px实心变量（--主强调色）；
右边框：5px实心变量（--主强调色）；
文本对齐：居中；
}
.标题信息{
柔性生长：1；
}


你好

欢迎

你好

谢谢你的代码，我将研究flex机器人，因为我还没有使用过它：）