Dfyjkt

I need the width of the whole page to be 1200px, but I must be doing something wrong because when I say for the html to be 1200px (either calling out the html or the body) chrome web dev tools always says its about 1300 px with a large right hand margin? I was looking through similar posts, and added more code that helped other people but it's still there for me. What am I doing wrong?

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;

 

Try adding *
box-sizing: border-box
to your css. I also agree with Lux, if you create a live example then it will be much easier to help you come up with a solution.