I have a wordpress site/elementor and i want to extend a section/div to the right side outside the main div like in the picture below.

At the moment the div has a fixed width of 1600px but the div goes beyond the page, which isn't really best practice and not really responsive.

A size of 100% covers only the main div.

Does anyone have a idea how to fix this in css?

CodePudding user response：

1. Change fixed width 1600px to minWidth: 1600px
2. Or set overflow: scroll on a parent

CodePudding user response：

You could use width: calc(100% 30px); on the child to achieve this.

.parent {
  width: 100px;
  height: 100px;
  border-left: 1px solid;
  border-right: 1px solid;
}

.child {
  border: 1px solid red;
  height: 50px;
  width: calc(100%   30px);
}

<div >
  Some text
  <div >
  </div>
</div>

CodePudding user response：

Set the overflow to hidden and then set the width beyond the main div.

.someText{
  width: calc(100%   5em);
  overflow: hidden;
}

/* To hide the horizontal scroll bar that may appear */
body {
  overflow-x: hidden;
}