Make an element as wide as the grandparent

Question

I have the following markup where #content is 80% wide and contains .slide elements. I want the slides to be as wide as their grandparent (i.e. bod

Answer 1

You can try this:

.slide {
  height: 6em;
  background: indianred;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

JSFiddle Demo