Question: ```css
.container {
  width: 400px;
  margin: 0 auto;
}

.main-content {
  width: 75%;
  height: 500px;
  background-color: red;
  float:left;
}

.sidebar {
  width: 25%;
  height: 500px;
  background-color: blue;
  float:left;
}
```

```html
<div class="container">
  <div class="main-content"></div>
  <div class="sidebar"></div>
</div>
```

I am trying to make my right sidebar's background blue color extend to the right edge of the screen. Right now the sidebar is in a fixed layout. The arrows in the image show where I would like the background to be blue.

[![enter image description here](https://i.stack.imgur.com/zCEGV.png)](https://i.stack.imgur.com/zCEGV.png)

EDIT: Added some code as requested.

Answer: 
If you want your `container` to remain 400px wide (which I assume you want), you can assign a linear gradient background with an abrupt color change at 50% to the `body` as shown below. (Also add `margin: 0`to the body to prevent default margins.)

```css
body {
  background: linear-gradient(to right, #fff 0%, #fff 50%, #00f 50%, #00f 100%);
  margin:0;
}
.container {
  width: 400px;
  margin: 0 auto;
}

.main-content {
  width: 75%;
  height: 500px;
  background-color: red;
  float:left;
}

.sidebar {
  width: 25%;
  height: 500px;
  background-color: blue;
  float:left;
}
```

```html
<div class="container">
  <div class="main-content"></div>
  <div class="sidebar"></div>
</div>
```
Here you go. The grey area is where you can put your sidebar.

**Updated**: Full width containers with a fixed sidebar.

```css
.container-fluid {
  float: left;
  width: calc(100% - 330px + 15px * 2);
  padding: 0;
}

.box {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.fixed-container {
  float: right;
  width: 300px;
}

.main-content {
  width: inherit;
  height: 500px;
  background-color: red;
  float: left;
}

.sidebar {
  width: inherit;
  height: 500px;
  background-color: blue;
  float: left;
}

.sidebar .bar {
  width: 50%;
  height: 500px;
  background-color: #ccc;
}
```

```html
<div class="container-fluid">
  <div class="box">
    <div class="main-content column">
      <div class="foo"></div>
    </div>
  </div>
</div>
<div class="fixed-container">
  <div class="sidebar column">
    <div class="bar"></div>
  </div>
</div>
```