固定位置问题，宽度为100％

Question

使用时出现以下错误

.high-secuity {
    position: fixed;
    top: 0;
    background: #ff782f;
    color: #fff;
    width: 100%;
    border-radius: 0;
    margin-bottom: 0;
    margin-left: -15px;
}

问题是橙色面板超出了屏幕。我该如何解决？不想使用固定宽度，因为它应该具有响应性

Answer 1

使用width: inherit;到橙色块，我的示例正在工作

body {
  background-color: #ccc;
}

.container {
  position: relative;
  width: 300px;
  background-color: #fff;
  overflow: hidden;
  padding: 50px 15px;
}

.high-secuity {
  position: fixed;
  top: 0;
  background: #ff782f;
  color: #fff;
  width: inherit;
  border-radius: 0;
  margin-bottom: 0;
  margin-left: -15px;
  padding: 15px;
}

<div class="container">
  <h1>Osloskolen</h1>
  <div class="high-secuity">Your message</div>
</div>