i have a simple web page template.my problem is that, my web page has a horizental scroll.but i want remove it.this is my code:
<html lang="FA">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body dir="rtl">
<section >
<div >
<div >
<img src="logo.png" alt="">
<h2 >My logo text</h2>
</div>
</div>
<div >
<div >
<img src="" alt="">
</div>
</div>
</section>
<section >
<div >
<div style="height: 800px;">
<div >
<div >
<input type="text" placeholder="search">
</div>
</div>
</div>
</div>
</section>
<footer >
<div >
</div>
</footer>
</body>
</html>
this is screen shot of result:
any solution?
CodePudding user response:
Try setting the body css using the overflow-x property for horizontal scrollbars like this:
.body{
overflow-x:hidden;
}
CodePudding user response:
put the div inside container div
<div >
<div >
<img src="logo.png" alt="">
<h2 >My logo text</h2>
</div>
<div >
<div >
<img src="" alt="">
</div>
</div>
</div>