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>
```
Procedure
=========

To achieve the desired effect based on your **HTML** layout, set the sidebar width to `100%` viewport width subtracted by the parent container width `400px`, divided by `2`, then plus the `25%` width of the container (i.e. `25% + (100vw - 400px) / 2`).

Then set the margin right, negative value of the `100%` viewport width subtracted by the parent container width `400px`, divided by `2` (i.e. `25% + (100vw - 400px) / 2 * -1`).

CSS
===

```
.sidebar {
  width: calc(25% + calc(100vw - 400px /* 400px is the width of the .container */) / 2);
  margin-right: calc(calc(100vw - 400px /* 400px is the width of the .container */) / 2 * -1);
  height: 500px;
  background-color: blue;
  float:left;
}

```

**Heads up** change the value `400px` according to the set `.container` width.

Test
====

Fill the sidebar with lots of contents to see it in action.