Html 将内部元件放置在“a”的外部；“最大宽度”-容器

我想设置一个元素（红色），该元素被放置在一个容器中，该容器的中心最大宽度（灰色）为视口宽度的50%

代码如下：

<div class="container" style="max-width:700px;margin:0 auto;">
<div class="inner-element">Should be 50% of viewport-width</div>
</div>

应为视口宽度的50%

我尝试了position:absolute，但也许有更好的解决方案。

---

提前感谢。

您可以使用下面的

vw

进行尝试

.container{
最大宽度：400px；
保证金：0自动；
背景：灰色；
填充：20px0；
}
.内部要素{
位置：相对位置；
左：50%；
宽度：50vw；
背景：红色；
高度：50px；
不透明度：0.5；
}

应为视口宽度的50%