Magic Carpet... aka positioning a 100% wide element inside the layout flow

css

.magic-carpet {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  // fixed height
  height: 250px;

  // height percent of screen
  height: 50vh;

  // height based on aspect ratio
  height: 0;
  padding-bottom: 50% // 2:1, e.g. 100% (width) / 50% (of width as height)
}