The problem is that you have too many columns in a view, which expands beyond the original width of the body. This is common among OOTB lists where multiple columns are within a view. There are many possible fixes to this problem.
- Set a min-width of 's4-bodyContainer' to a higher value
- Run a jQuery/JS script to make adjustments to the width when SP is done rendering the table.
Using the above mentioned second approach, you could do something like:
$(document).ready(function () {
ExecuteOrDelayUntilScriptLoaded(fixWidth, "sp.js");
});
$(window).resize(function () {
fixWidth();
});
function fixWidth(){
//Elements with the potential to be too wide.
//Make adjustments to below line based on your structure.
elements = $(".ms-bodyareacell > div > table, .main-container > div > table, #layoutsTable");
//#layoutsTable for Wiki Pages
leftPanelWidth = $("#s4-leftpanel").width();
//For each Elements
$(elements).each(function(){
//if it’s wider than the side width
window.console && console.log('Width: ' + $(this).width());
if($(this).width() > ($("#s4-bodyContainer").width() - leftPanelWidth ))
{
//Calculate the new width taking the left nav into account
newWidth = leftPanelWidth + $(this).width();
//Set the width!
$("#s4-bodyContainer > div").attr("style","width:" + newWidth +"px");
}
});
}