Media Queries Horizontal Scroll Issue

Responsive Design are great, but it is not easy to do. Horizontal Scroll always attack your responsive project. How to remove it ?

1. Add max-width property. Why ? max-width help limit the width.

  @media screen and (max-width: 960px) {
body { 
...
max-width: 970px;
}

2. Using overflow-x property. overflow-x help hide all elements outside the specified width. More about overflow

  @media screen and (max-width: 960px) {
body { 
...
overflow-x: hidden;
}

You Step On The Finish Line

One most important things in Responsive Web Design work. Try put the code in your body. If it work, i hope you like it