DEV Community

Discussion on: What CSS tip do you want to share with others?

View post

Replies for: I don't use it all the time, but this one comes in handy when you need something to go full width but you're confined by a container it's already i...

Collapse
 
adrianmarkperea profile image
Adrian Perea •

First time I've seen this solution!

I usually see two variants:

  1. Use a container multiple times to only constrain particular sections of your page: 
<div class="container">...</div>
<img class="full-width" ... />
<div class="container">...</div>
  1. Break out the container by adding negative margins to both sides: 
.container {
    padding: 2rem 1rem;
}

.breakout {
    margin: 2rem -1rem;
}