Left edge of site is cut off when viewed in smartphone view

I am learning how to make an existing site, responsive and something that appears to be so simple, is making me absolutely crazy.  
When I apply the max-width-480px style sheet, it is cutting off about 5 px of my left edge.  You can tell it is missing because the rounded corners I added in css are cut off abruptly on the left but are nice and smooth on the right.  I have spent several hours trying to tweak the wrapper and mainwrapper css and nothing seems to fix it.  Any ideas?

Note: that the image for the topwrapper is a set width white background with rounded corners.  Since the set sized graphic is not going to be responsive, I have removed it for the smaller screens and just added the border-radius to the mainwrapper div.

A snippet of the wrapper related divs in html
<body>
  <div id="wrapper">
    <div id="topwrapper"></div>
    <div id="mainwrapper">
      <!-- Header Start -->
      <div id="header">
        <div class="center">
          <!-- Logo Start -->
          <div id="logo"><a href="<?e(_WWW_)?>index.php"><img src="images/wworks/wwlogo239px.png" alt="logo" /></a></div>
          <!-- Logo End -->
          
          <div id="headerright">
            <!-- Menu Navigation Start -->

								<? require('top-navigation.php'); ?>

            <!-- Menu Navigation End -->
          </div><!-- end headerright -->
        </div><!-- end center -->
      </div><!-- end header -->
      <!-- Header End  -->

Open in new window


And the regular (non-responsive css)
/* ----------------------- WRAPPER -----------------------*/
#wrapper {  
  width: 100%;
  max-width: 976px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}


#topwrapper {
  height: 19px;
  width: 100%;
  max-width: 976px;
  background: url(../images/topwrapper.png) no-repeat;
}
#mainwrapper {
	width:100%;
  max-width: 976px;
  background: url(../images/mainwrapper.png) repeat-y;
}
#bottomwrapper {
  margin: 0 auto;
  height: 55px;
  width: 100%;
  max-width: 976px;
  background: url(../images/bottomwrapper.png) no-repeat;
}
.center {
  margin: 0 auto;
  width: 900px;
}

/* ----------------------- HEADER -----------------------*/
#header {
  width: 960px;
  height: 50px;
  padding-bottom: 39px;
  background: url(../images/bgheader.jpg) bottom center repeat-x;
  margin: 0 auto;
}
#headerright {
  padding-top: 20px;
  width: 670px;
  float: right;
	position: relative;
}
#logo {
  margin-top: 15px;
  float: left;
  width: 220px;
}

Open in new window

Responsive CSS
#wrapper {
	width: 100%;
	}

#topwrapper {
	display:none;
	}

#mainwrapper {    /*white background for all header and maincontent */
	border-radius: 5px 5px 25px 25px;
} 

#bottomwrapper {
  display: none;  
}


.maincontent {
	width: 60%;
	float: left;
}



<!-- HEADER -->
#header {
  /*width: 50%;*/
  /*height: 50%;*/
  /*background-image: none;*/
}

.center {
	width: 95%;
}

#headerright{  /* includes phone numbers and full site navmenu */
	display:none; 
}

#logo {
	width: 100%;
}

Open in new window

Shows left corner/side is cut off by a few pixelsShows right corner/side is fully visible and displays rounded corner correctly.
deeayrianAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
You would need to post a link.
0
deeayrianAuthor Commented:
0
deeayrianAuthor Commented:
I finally figured it out! The mainwrapper had a background image that was also a set width image (like the topwrapper). Once I realized the mainwrapper's background image repeated only y, I removed it and replaced it with a background-color of white instead and it looks great.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Well done - glad you sorted it out.
0
deeayrianAuthor Commented:
I figured out the solution myself and posted it to share.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.