Div stretches only in one direction

I created a doc page using Flare and forced breadcrumbs to stay fixed below the top nav. The page works as it is, but I want the div to stretch across the page.
Please see current design below:

Click to see example screenshot

I can stretch the div to 100% if I remove the min-width in the child div, but it stretches only to the right, while keeping the breadcrumbs where I want. Example below:

Click to see example screenshot

Or I can make it stretch 100% by adding left:0; on the parent div, but then the breadcrumbs move out of place. I can use margin-right or right to position the div to desirable areas, but div does not sync with the rest of the content when resizing browser.



Try this:

The important part here being position, width, left and transform on .full-width.

Applied the css ” left ” property if that div has “absolute” position.

Thank you for your replies. Here are the html and css:

Html:

<div class="crumbs_wrapper">
 <div class="MCBreadcrumbsBox" >
  <span class="MCBreadcrumbsPrefix">You are here:</span>
  <a target="_blank" rel="nofollow" href="" class="MCBreadcrumbsLink">B1</a>
  <span class="MCBreadcrumbsDivider"> B2 </span>
  <a  target="_blank" rel="nofollow" href=""class="MCBreadcrumbsLink">B3</a>...
 </div>
</div>

CSS:

div.crumbs_wrapper
{  
 position: fixed;
    float: none;
    width: 100%;
    z-index: 1;
}

div.MCBreadcrumbsBox{
padding-bottom: 5px !important;
    padding-top: 18px !important;
    padding-left: 10px !important;
    float: left;
    position: relative;
    margin-top: -12px;
    background-color: #FFF;
    z-index: 999;
    width: 100%;
    max-width: 104.5em;
    box-shadow: 1.5px 1.5px 15px #888888;
}

Th tool I use is Flare, which does not have the fixed breadcrumbs feature. Breadcrumbs are automatically generated; I only changed the CSS values and added an extra div with the .crumbs_wrapper class. Other classes are automatically generated by the software.

If I remove the max-width the div only stretches to the right, and if I add left: 0; to the parent div, the breadcrumbs move to the left. I can bring the breadcrumbs to the position where I want using margin, but it does not stay fixed when the browser is resized. Also, the paddings and margin-top are used to keep the breadcrumbs below the top nav and aligned with the rest of the content.