Element's side margin overflows parent

Question

I want to keep my .side-view__left a certain width (40%) but when I add an element with side margins (0 30px) it suddenly overflows the parent rather than stay in the boundaries. It can be observed that p element stays in place but adding a margin on the input pushes it only on the left rather than both sides.

How can I possibly fix it so that input actually has some side margins but stays in its place?

* {
  box-sizing: border-box;
}

.side-view {
  display: flex;
}

.side-view__left {
  flex: 1 1 40%;
  border: 2px solid black;
}

.side-view__right {
  flex: 1 0 60%;
}

p {
  background: orange;
}

input {
  width: 100%;
  margin: 0 30px;
}

<div class="side-view">
  <div class="side-view__left">
    <input />
    <p>some text</p>
  </div>
  <div class="side-view__right">
  </div>
</div>