Bootstrap 3 formatting issue with Internet Explorer 11

Question

I have an Internet Explorer problem with a site I'm developing using Bootstrap 3.

The test site is here http://npcpp2.azurewebsites.net

On Chrome/Firefox it works perfectly, but on Internet Explorer 11 the top menu and various other items on the page seem to be out of place.

For example in IE 11, there is a margin to the left of the main menu and also the 3 boxes in the middle of the page are pushed to the sides of the page.

Can anyone offer any suggestions, I'm tearing my hair out?

Thanks in advance, Chris

Answer 1

The browser default padding left is kicking in on the ul on firefox (probs also on ie)

ul.info-nav-list {
  padding-left:0;
}

Give your centering div a display of block, also ie might require a position:relative; because it's like that.

#home-header .info-shortcuts {
    width: 1140px;
    margin: 0 auto;
    display: block;
    position: relative;
}