I am beginner. I am trying to create webpage to practice HTML & CSS. I set the width of all of them to 100% but I am getting scroll bar horizontally. I tried a lot to find the problem but I failed.
My code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
header {
width: 100%;
height: 89vh;
display: grid;
grid-template-columns: 53.7% auto;
grid-column-gap: 2.2rem;
border: 1px solid black;
}
.header-1 {
height: 100%;
width: 100%;
background: url(./twitter-header-2.png) no-repeat center center/cover;
display: flex;
align-items: center;
justify-content: center;
}
.header-1 > i {
font-size: 275px;
color: white;
}
.header-2 {
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
.header-2 i {
font-size: 42px;
color: #1da1f2;
margin-bottom: 4rem;
}
.header-2-title {
font-family: TwitterChirpExtendedHeavy, Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 64px;
font-weight: bolder;
margin-bottom: 3.2rem;
}
.header-2-subtitle {
font-family: TwitterChirpExtendedHeavy, Verdana, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 31px;
font-weight: bolder;
margin-bottom: 2rem;
}
.header-2 a {
text-decoration: none;
}
.header-2-a-1, .header-2-a-2 {
width: 64%;
text-align: center;
margin-bottom: 20px;
padding: 13px 0;
border-radius: 30px;
font-weight: bold;
}
.header-2-a-1 {
background: #1da1f2;
color: white;
}
.header-2-a-2 {
border: 1px solid #1da1f2;
color: #1da1f2;
background: transparent;
}
.header-2-a-1:hover {
background: #1a91da;
}
.header-2-a-2:hover {
background: #e8f5fe;
}
/* ========================= Footer ========================= */
footer {
width: 100%;
height: auto;
text-align: center;
align-items: center;
margin: 10px 0;
border: 1px solid black;
}
footer a, footer p {
color: #5b7083;
font-size: 13px;
text-decoration: none;
}
footer a {
margin: 0 5px;
}
footer p {
margin-top: 5px;
}
footer a:hover {
text-decoration: underline;
}
/* ==================== Responsive ==================== */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="./twitter-fav.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./fontawesome-free-5.15.3-web/css/all.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
<title>Twitter. It's whats's happening / Twitter</title>
</head>
<body>
<!-- ========================= Header ========================= -->
<header>
<div class="header-1"><i class="fab fa-twitter"></i></div>
<div class="header-2">
<div class="header-2-contents">
<i class="fab fa-twitter"></i>
<p class="header-2-title">Happening now</p>
<p class="header-2-subtitle">Join Twitter today.</p>
<a href="#"><div class="header-2-a-1">Sign up</div></a>
<a href="#"><div class="header-2-a-2">Log in</div></a>
</div>
</div>
</div>
</header>
<!-- ========================= Footer ========================= -->
<footer>
<div class="footer-1">
<a href="#" role="button">About</a>
<a href="#" role="button">Help Center</a>
<a href="#" role="button">Terms of Service</a>
<a href="#" role="button">Privacy Policy</a>
<a href="#" role="button">Cookie Policy</a>
<a href="#" role="button">Ads info</a>
<a href="#" role="button">Blog</a>
<a href="#" role="button">Status</a>
<a href="#" role="button">Careers</a>
<a href="#" role="button">Brand Resources</a>
<a href="#" role="button">Advertising</a>
<a href="#" role="button">Marketing</a>
<a href="#" role="button">Twitter for Business</a>
<a href="#" role="button">Developers</a>
<a href="#" role="button">Directory</a>
<a href="#" role="button">Settings</a>
</div>
<div><p>© 2021 Twitter, Inc.</p></div>
</footer>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
How can I remove the scroll bar?
I am getting scroll bar on inspect mode
but on normal window it seems good.
Where is the problem with my code? How do I solve this problem?
2
Answers
I have found out a solution.
All you have to do is change the display attribute of the header. Liker this:
Here, change the display property with flex.