Expand div with fixed width - css

Question

How do I expand the div#wrapper outside its parent by its child item's width.item like the image below?
I have tried translate but the result is not ideal. The hardest part is that I cannot programmatically expand it with the item's width, but hard code it with translate like 90px which causes a problem when the screen is resized (please use the developer tool to resize and you will get my point).
I cannot use position: absolute; because there are some elements before the #wrapper.
Below is my try:
#main {
background-color: gray;
display: flex;
height: 600px;
justify-content: stretch;
}
#first,
#second {
width: 50%;
}
#first {
align-items: center;
background-color: blue;
display: flex;
flex-direction: column;
padding: 30px 0 30px 30px;
}
#wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
transform: translateX(90px);
width: 100%;
}
.item {
background-color: orange;
border: 3px solid #000;
height: 50px;
width: 100%;
}
<div id="main">
<div id="first">
<p>Some text...</p>
<p>Some text...</p>
<p>Some text...</p>
<div id="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div id="second">
</div>
</div>

Answer 1

Do you mean something like this?
#main {
background-color: gray;
display: flex;
height: 600px;
justify-content: stretch;
}
#first,
#second {
width: 50%;
}
#first {
align-items: center;
background-color: blue;
display: flex;
flex-direction: column;
padding: 30px 0 30px 30px;
}
#wrapper {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
width: 100%;
position:relative;
margin-right:-66%;
}
.item {
background-color: orange;
border: 3px solid #000;
height: 50px;
width: 100%;
}
<div id="main">
<div id="first">
<p>Some text...</p>
<p>Some text...</p>
<p>Some text...</p>
<div id="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div id="second">
</div>
</div>