I'm facing a challenge with rotating a div while trying to cover the entire width of the body. Initially, I attempted setting the width to 120% instead of 100%, however, this caused issues with centering the div correctly. How should I go about solving this problem?
Below is the code snippet I attempted to implement:
* {
margin: 0;
padding: 0;
}
body {
background-color: yellow;
overflow-x: hidden;
}
.rotation {
position: relative;
display: table;
width: 120%;
height: 500px;
transform: rotate(-5deg);
background-color: green;
margin-left: -50px;
}
.wrapper {
display: table-cell;
vertical-align: middle;
margin: 0 auto;
text-align: center;
transform: rotate(5deg);
} <h1>Some title</h1>
<div class="rotation">
<div class="wrapper">
<h1>Heading</h1>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quaerat, dolore quod cum ea rerum asperiores cupiditate esse harum. Voluptatibus soluta fuga, beatae quod dolorem, veniam sint ab non laboriosam.</span>
</div>
</div>