I can't seem to get the width of my whole page to stay at 1200px. Every time I set the html or body width to 1200px, Chrome web dev tools shows it as around 1300px with a wide right margin. I've tried adding extra code based on similar posts that helped others, but I still can't figure out what's wrong. Can someone please help me troubleshoot this issue?
html,body
{
margin: 0px;
padding: 0px;
display: inline-block;
width: 1200px;
}
@font-face {
font-family: Montserrat-Regular;
src: url('../fonts/Montserrat-Regular.ttf') format('opentype');
font-family: Montserrat-Bold;
src: url('../fonts/Montserrat-Bold.ttf') format('opentype');
}
body{
font-family: 'Montserrat-Regular', sans-serif;
margin: 0;
width: 100%;
}
/*GRID*/
.full-width{
width: 100%;
clear: both;
padding-left: 20px;
}
.half-width{
width:50%;
float: left;
}
.third-width{
width:33%;
float:left;
}
/*HEADER*/
header{
border-bottom: 6px #77a466;
}
ul{
color:#77a466;
list-style-type: none;
}
nav{
float:right;
padding-top: 25px;
}
nav ul li{
display:inline;
text-transform: uppercase;
font-family:'Montserrat-Bold', sans serif;
padding: 0 8px 0 8px;
}
h1{
line-height: 60px;
}
h1, h2, h3{
font-family: 'Montserrat-Bold', sans-serif;
text-transform: uppercase;
}
span{
color: #77a466;
}
/*MAIN*/
img{
background-size: cover;
height: 290px;
width: 1200px;
}