CSS Grid dimensions not behaving as expected

Question

I am trying the new CSS Grid Layout but I am having some unexpected results.

My first issue is that my footer is not occupying 98% of my viewport width, my header has the exact same code and looks fine.

The second issue is that the page looks like it has padding(whitespace) on the immediate left of the page but looks fine on the right. Everything looks the exact same in Firefox and Chrome.

My purple sidebar is purposefully indented so ignore!

Does anyone have experience with CSS grid layout?

.grid_container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(12, 1fr);
    /*grid-gap: 20px; Used to add a gap between tracks in our grid */
}
.header{
    grid-area:header;   /*Name for our grid, use this as reference to position items */
    width: 98vw;
    height: 40px;
    grid-row-start: 1;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    background:red;
}
.header_social_media_bar_list{
    list-style: none;
}
.header_social_media_bar_list li{
    float: left;
}
.masthead{
    grid-area:masthead;
}
.lightbox{
    grid-area:lightbox;
    grid-row-start: 2;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    width: 98vw;
    height: 336px;
    background: blue;
}
.sidebar_left{
    grid-area:sidebar_left;
    grid-row-start: 3;
    grid-row-end: auto;
    grid-column-start: 2;
    grid-column-end: 12;
    width: 220px;
    height: 436px;
    background: purple;
}
.main_content{
    grid-area:main_content;
}
.footer{
    grid-area:footer;
    grid-row-start: 4;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    width: 98vm;
    height: 136px;
    background: orange;
}

<div class="grid_container">
    <div class="header">
            <div class="header_social_media_bar">
                <ul class="header_social_media_bar_list">
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                    <li>Item4</li>
                    <li>Item5</li>
                </ul>
            </div>
    </div>
    <div class="lightbox">
        Lightbox
    </div>
    <div class="sidebar_left">
        Left Bar
    </div>
    <div class="footer">
        Footer
    </div>
</div> <!--End Grid container -->

Answer 1

Your problem was width: 98vm and should change to width: 98vw and for extra padding you should set padding: 0; margin: 0; on body

my header has the exact same code and looks fine.

Compare:

.header {
    width: 98vw;
    ---------^
}

.footer{
    width: 98vm;
    ---------^
}

Actually i think you don't try vw as you said in comment, but it now works.

body {
margin: 0;
padding: 0;
}

.grid_container {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(12, 1fr);
    /*grid-gap: 20px; Used to add a gap between tracks in our grid */
}
.header{
    grid-area:header;   /*Name for our grid, use this as reference to position items */
    width: 98vw;
    height: 40px;
    grid-row-start: 1;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    background:red;
}
.header_social_media_bar_list{
    list-style: none;
}
.header_social_media_bar_list li{
    float: left;
}
.masthead{
    grid-area:masthead;
}
.lightbox{
    grid-area:lightbox;
    grid-row-start: 2;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    width: 98vw;
    height: 336px;
    background: blue;
}
.sidebar_left{
    grid-area:sidebar_left;
    grid-row-start: 3;
    grid-row-end: auto;
    grid-column-start: 2;
    grid-column-end: 12;
    width: 220px;
    height: 436px;
    background: purple;
}
.main_content{
    grid-area:main_content;
}
.footer {
    grid-area: footer;
    grid-row-start: 4;
    grid-row-end: auto;
    grid-column-start: 1;
    grid-column-end: 12;
    width: 98vw;
    height: 136px;
    background: orange;
}

<div class="grid_container">
    <div class="header">
            <div class="header_social_media_bar">
                <ul class="header_social_media_bar_list">
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                    <li>Item4</li>
                    <li>Item5</li>
                </ul>
            </div>
    </div>
    <div class="lightbox">
        Lightbox
    </div>
    <div class="sidebar_left">
        Left Bar
    </div>
    <div class="footer">
        Footer
    </div>
</div> <!--End Grid container -->