Updated my website design last week and tested it on different browsers and devices – it's a portfolio site using Bootstrap - and all was good. I checked my website this morning on my widescreen monitor using chrome and the full-width images seemed to have been reduced in size leaving a margin on the right-hand side.
This anomaly is not showing up on different browsers or even on Chrome using a smaller screen!
The website is live at http://www.burnser.com/index.html
Any help would be greatly appreciated. Thanks!
The images themselves only have a native width of 1600px. If they should always be full screen, you should include width: 100%; to your CSS.
.carousel-inner>.item>a>img,
.carousel-inner>.item>img,
.img-responsive,
.thumbnail a>img,
.thumbnail>img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}