Div 100% width without margin

Question

I am trying to create a full width div that covers completely the available space in the screen. All the content is made with HTML and CSS in an content editor webpart.

However, I am getting a white space on the left and right of the page. Can I remove these spaces and make my div 100% real width? I guess this space is related to the gap between the webpart and the page itself, so the div only reaches until the end of the webpart.

Answer 1

I managed to remove a lot of space adding this css code:

.ms-rtestate-field
{
    padding-right: 0px !important;
}

.ms-rte-layoutszone-inner 
{
    padding-right: 0px;
    padding-left: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}

However I still have 1px of white space on both left and right sides that I cannot manage to remove...

Answer 2

I believe the s4-workspace hard-coded resizing might have something to do with this.

A JavaScript code runs on SharePoint to give width and height to this container, so this would be one of my initial candidates for investigation.

If the left menu is showing, there is another container "s4-tablerow" (or alike) that is given a left margin to simulate a float to the left. This also would be another candidate to investigate.

Answer 3

Use this as your CSS file:

/*  reset styles
*/ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent; }