Javascript CSS网格容器不使用整个宽度

我正在尝试用D3.js和vanilla js构建一个简单的仪表板。它看起来像下图。我添加了一个边框，以便更容易地可视化我是如何设计它的。问题是我希望网格使用整个宽度。现在，在容器的左侧和右侧有一个很大的空白，我想缩小（图形）。有没有一个简单的方法可以做到这一点

我在上找不到关于这个的任何信息

常数高度=500；
常数宽度=800；
常量skierIconSvg=https://image.flaticon.com/icons/svg/94/94150.svg';
常数门=
'https://docs.google.com/drawings/d/e/2PACX-1vReBMnm0oMHA-DuF_s6ds4irdAl_Y_zSbW3rO3DzG6u2Gmp2_ta2tFXO-poCOm7wXx02Dzd2EsT0c13/pub?w=186&h=290';
恒量饰面=
'https://docs.google.com/drawings/d/e/2PACX-1vTWOmvwPIu2MrEbZAla5m2N5CcPVsPSEKHeKBI0sZsF9wKkMhZosnOmgMo1WHTnnAPA9i5LV0p0LR_r/pub?w=186&h=290';
常数[p1，p2，p3]=[
[80, 100],
[750, 230],
[750, 230],
];
常量svg=d3
.选择（“#容器”）
.append（'svg'）
.attr（'viewBox'，'0800240'）；
//存储对要更新的范围的引用
常量滑雪者高度=d3。选择（“#滑雪者高度”）；
const-vek=document.querySelector（'#vekt'）；
控制台日志（vek.value）；
const line=svg.append（'line'）.attr（'stroke'，'black'）；
const connection=svg.append（'line'）.attr（'stroke'，'green'）；
常量标记=svg
.append（'圆'）
.attr（'r'，5）
.attr（'笔划'，'红色'）
.attr（'fill'，'none'）；
常数g=svg
.append（'g'）
.attr（'光标'，'移动'）
.attr（'pointer-events'，'all'）
.attr（'笔划'，'透明'）
.attr（'stroke-width'，30）；
常数开始=g
.append（'图像'）
.attr（'id'，'sdjj'）
.基准面（p1）
.attr（'href'，gate）
.attr（'width'，100）
.attr（'height'，100）
.打电话(
d3
.drag（）
.主题（[x，y]）=>({
x,，
Y
}))
.on（'拖动'，拖动）
);
常数mal=g
.append（'图像'）
.attr（'id'，'sdjj'）
.基准面（p2）
.attr（'href'，finish）
.attr（'width'，100）
.attr（'height'，100）
.attr（'transform'，'translate（710140）'
.打电话(
d3
.drag（）
.主题（[x，y]）=>({
x,，
Y
}))
.on（'拖动'，拖动）
);
常数skier=g
.append（'图像'）
.attr（'id'，'skier'）
.基准面（p3）
.attr（'href'，skierIconSvg）
.attr（'width'，100）
.attr（'height'，100）
.attr（'transform'，'translate（-50，-70）'））
.打电话(
d3
.drag（）
.主题（（）=>({
//使用滑雪者所在的位置，而不是他应该在的位置
x：编号（skier.attr（'x'）），
y：编号（skier.attr（'y'）），
}))
.on（'start'，（）=>{
//中断所有转换
滑雪者。中断（）；
连接中断（）；
marker.interrupt（）；
})
.on（'拖动'，拖动）
.on（'end'，dropSkier）
);
更新（）；
函数（d）{
d[0]=d3.event.x；
d[1]=d3.event.y；
更新（）；
potensiellEnergi（）；
}
函数更新（）{
常数t=（宽度+高度）/距离（p1，p2）；
常数l1=插值（p1，p2，t）；
常数l2=插值（p2，p1，t）；
常数p=插值（p1，p2，项目（p1，p2，p3））；
connection.attr（'x1'，p3[0]）.attr（'y1'，p3[1]）；
connection.attr（'x2'，p[0]）.attr（'y2'，p[1]）；
marker.attr（'cx'，p[0]）.attr（'cy'，p[1]）；
行.attr（'x1'，l1[0]）。attr（'y1'，l1[1]）；
行.attr（'x2'，l2[0]）.attr（'y2'，l2[1]）；
start.attr（'cx'，（d）=>d[0]）.attr（'cy'，（d）=>d[1]）；
滑雪者.attr（'x'，（d）=>d[0]）.attr（'y'，（d）=>d[1]）；
mal.attr（'cx'，（d）=>d[0]）。attr（'cy'，（d）=>d[1]）；
text（${getHeight（p，p1，p2）.toFixed（2）}meter`）；
}
函数距离（[x1，y1]，[x2，y2]）{
返回数学sqrt（（x2-x1）**2+（y2-y1）**2）；
}
函数插值（[x1，y1]，[x2，y2]，t）{
返回[x1+（x2-x1）*t，y1+（y2-y1）*t]；
}
功能项目（[x1，y1]，[x2，y2]，[x3，y3]）{
常数x21=x2-x1，
y21=y2-y1；
常数x31=x3-x1，
y31=y3-y1；
返回（x31*x21+y31*y21）/（x21*x21+y21*y21）；
}
函数getHeight（[xp，yp]，[x1，y1]，[x2，y2]）{
//请注意，y是从上到下计数的，因此较高的y表示
//一个点实际上更低。
//首先，总高度为100米。
常数px渗透计=（y2-y1）/100；
//以像素为单位计算高度差
常数heightDiffPx=y2-yp；
//现在将其转换为米
返回高度差Px/Px渗透计；
}
函数vektVelger（）{
const vektVerdi=document.querySelector（'#vekt'）；
const vektDisplay=document.querySelector（“#skier vekt”）；
vektDisplay.innerHTML=vektVerdi.value；
}
函数potensiellEnergi（）{
const vektVerdi=parseInt（document.querySelector（“#skier vekt”）.textContent）；
常量skierHeight=parseInt(
document.querySelector（“#滑雪者高度”）.textContent
);
const hastighet=document.querySelector（“#skier hastighet”）；
const potEDisplay=document.querySelector（“#skier potentialenergi”）；
const potEnergi=${Math.round（vektVerdi*skierHeight*9.8）}；
const hastghetsutregning=`${Math.round(
数学sqrt（2*（skierHeight*9.8））
)}`;
return（hastighet.innerHTML=`${hastighetstregning}`）(
（potEDisplay.innerHTML=`${potEnergi}`）
);
}
功能滑水器（d）{
常量投影=插值（p1，p2，投影（p1，p2，p3））；
滑雪者
.transition（）
.持续时间（500）
//先趴在地上
.attr（'x'，投影[0]）
.attr（'y'，投影[1]）
.on（'end'，（）=>{
滑雪者
.transition（）
.持续时间（2500）
.ease（d3.easeQuadIn）
//先趴在地上
.attr（'x'，p2[0]）
.container {
        max-width: unset;
    }