CODEWITHSUNDEEP
javascripthtmlcssweb
Anas Ali
Anas Ali

Reputation: 21

website page has unwanted horizontal scroll bar

I have a annoying bug with my website where when i preview my website with live server, there is a unwanted horizontal scroll bar when there is no content in the scrolled area. I am a new developer so i come across many errors which mostly i can resolve. Can someone help me with the error in my code which is causing the horizontal scroll bar.`

This is my HTML

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

h1 {
  color: pink;
  padding-top: 10px;
  padding-left: 10px;
  font-family: sans-serif;
  text-align: center;
}

p {
  color: pink;
  font-family: sans-serif;
  padding-left: 5px;
  text-align: center;
}

.titles {
  border: 3px solid #fff;
  padding-top: 30px;
  padding-bottom: 30px;
}

header ul li {
  color: pink;
  list-style-type: none;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 30px;
  padding-bottom: 30px;
}

header ul {
  display: flex;
  position: relative;
  left: 400px;
}

header a {
  text-decoration: none;
  color: pink;
}
<header>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About Us</a></li>
  </ul>
</header>
<div class="titles">
  <h1>HI, I'm Anas and I'm a Junior Webdeveloper.</h1>
  <p>
    I have recently started coding and I am looking to persue a career in software engineering and web developing.
  </p>
</div>

Upvotes: 1

Views: 348

Answers (2)

user14116070
user14116070

Reputation:

This happens in HTML when the content goes beyond the width of the screen. A quick fix is too add
overflow-x:hidden
So in your style tag add

body{
overflow-x:hidden;
}

To read more on the overflow property
https://www.w3schools.com/cssref/pr_pos_overflow.asp
Happy Coding!

Upvotes: 0

Maggie Cody
Maggie Cody

Reputation: 679

Adjust your header ul css to leverage flexbox so you don't need the padding-left: 400px, which is causing the unwanted horizontal scroll:

header ul {
   display: flex;
   justify-content: flex-end;
}

Upvotes: 3

Related Questions