Question

I am working on a responsive website. When viewing this page within the phone resolution, I have 4 main links. At the top and bottom of the the border does not extend all the way to the left and right side, there is a 1px gap. I actually think the whole has a 1px unwanted margin. Everything from what I can tell is set to 100% with no margins that I can see.

html page is here

CSS is here

Thanks for your help!!

Answer 1

You’ve got a left: 1px on nav#mobile.

nav#mobile {
height: auto;
width: 100%;
text-transform: uppercase;
font-size: 0.9em;/*-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-bottomleft: 0px;
-moz-border-radius-bottomright: 10px;
border-top-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 10px;*/
position: relative;
/* [disabled]z-index: 1; */
left: 1px;
/* [disabled]top: 41px; */
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #333;
border-bottom-color: #333;
border-right-width: 0px;
border-left-width: 0px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #333;
border-left-color: #333;
margin-top: 25px;
float: right;
padding: 0px;
margin-left: 0px;
margin-bottom: 25px;
display: block;
}

Get rid of that one line, and you’re golden.