In these two examples, the div with class ‘.child’ is full width which is wider than the parent.

Example 1

<div class="parent">
	<div class="child"></div>
	<div class="wrap"></div>
</div>

<style>
	.parent {
		width: 450px;
		background-color: #c0c2c2;
		margin: 0 auto;
		position: static;
	}

	.wrap {
		position: relative;
		padding-top: 130px;
	}

	.child {
		background-color: #535fcf;
		position: absolute; /******/
		left: 0; /******/
		right: 0; /******/
		height: 100px;
		top: 30px;
	}

	div {
		height: 400px;
	}
</style>

Example 2 – using “vw” and “calc”

<div class="parent">
	<div class="child"></div>
</div>

<style>
	* {
		box-sizing: border-box;
	}

	body {
		margin: 0;
		overflow-x: hidden;
	}

	.parent {
		max-width: 400px;
		margin: 0 auto;
		padding: 1rem;
		position: relative;
		background-color: #c0c2c2;
	}

	.child {
		width: 100vw; /******/
		position: relative;  /******/
		left: calc(-50vw + 50%); /******/
		height: 100px;
		background-color: #535fcf;
	}
</style>

Reference

• How to Make a Child Div Element Wider than the Parent Div by W3docs