Taimoor Taimoor - 3 days ago 5
CSS Question

Can't figure the reason of increased page width

My webpage http://www.pointmovies.com/ is showing scroll bar at the bottom and it looks like it has so much empty space on the right side. I can't figure out what is increasing the width of my page and how can I remove this.

It is wordpress, every post is an article (image) having width of 18% and float left, so on one row 5 posts/articles will display. But because of this 18% width I see that my page width increased. When I remove this 18% from the article css, page go to normal.

This is the css for article

width: 18%;
float: left;
margin: 0px 0px 0px 21px;
min-height: 400px;


Here is the screenshot. Please check the below scroll bar which should not be there.
enter image description here

Answer

Add

#main {
overflow-x: hidden;
}  

to your css.

For your other issue. The Style for the first div after #main should looks like this. That is why your site is not going responsive properly.

margin: auto;
width: 100%;
max-width: 1170px;
display: inline;

Tamoor, the overflow-X disables it from left to right.

enter image description here

enter image description here enter image description here

Comments