# Base wrapper with fullwidth elements and sidebar with DRY

**URL:** https://discourse.roots.io/t/base-wrapper-with-fullwidth-elements-and-sidebar-with-dry/4641
**Category:** sage
**Created:** 2015-08-31T18:23:45Z
**Posts:** 13
**Showing post:** 2 of 13

## Post 2 by @austin — 2015-09-01T04:30:17Z

I could be completely out of touch but can’t you just do this with CSS?

https://codepen.io/austinpray/embed/preview/zvYdNK?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=zvYdNK

 ![](https://discourse.roots.io/uploads/default/original/2X/1/152a6b3c62f826d3a7cea874033610aff6a9c687.png) 

```
<div class="container">
  <div class="navbar navbar-default">
    <div class="navbar-header">
      <div class="navbar-brand">Roots</div>
    </div>
  </div>
  <div class="full-width">
    <div class="full-width-inner">I'm full width</div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div class="main-content">Main content, yo</div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-body">Sidebar stuff</div>
      </div>
    </div>
  </div>
</div>
```

```
.main-content {
  background: #f1f1f1;
}

$offset: calc(-1 * (100vw - 100%)/2);

.full-width {
  margin-left: $offset;
  margin-right: $offset;
  background: #bada55;
  &-inner {
    text-align: center;
    font-size: 2rem;
    width: 100%;
    border: 5px #1d1d1d solid;
    padding: 10%;
  }
}
```

---

_[View the full topic](https://discourse.roots.io/t/base-wrapper-with-fullwidth-elements-and-sidebar-with-dry/4641)._