Facebook page embed iframe doesn't fill container width

You can't make it 100% in a normal way.

This is your iframe src:

https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>

Note that there is parameter: width=450px.

It set the width of the iframe content to be 450px.

According to Facebook Plugin documentation:

The pixel width of the plugin. Min. is 180 & Max. is 500.

So the maximum width Facebook can get is 500.


Facebook states on the Page Plugin site

The plugin will by default adapt to the width of its parent container on page load (min. 180px / max. 500px), useful for changing layout

and

No Dynamic Resizing The Page plugin works with responsive, fluid and static layouts. You can use media queries or other methods to set the width of the parent element, yet: The plugin will determine its width on page load It will not react changes to the box model after page load. If you want to adjust the plugin's width on window resize, you manually need to rerender the plugin.

So I would think your best option would be to fill the width of the parent as much as possible (up to the 500px limit), and then centre it in the parent. If you try over riding the CSS set by facebook, it starts to display incorrectly, such as the posts not filling the timeline.