Menu
When I add the middle div (the blue one on screenshot), a horizontal scroll bar appears.
I've tried to change the width of divs, decided to use different measurement units.
Played with position values, display values.
I'm a beginner, and I have no idea what I am doing wrong. Please help me :)
Maybe there is a problem with images in my code? Screenshot
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 400;
color: hsl(192, 100%, 9%);
width: 100vw;
}
* {
box-sizing: border-box;
}
h1,
h2 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
p {
font-size: 18px;
}
button {
font-family: 'Open Sans', sans-serif;
;
font-weight: 700;
}
/* Header */
header {
height: 100vh;
width: 100%;
background-image: url(./images/bg-hero-desktop.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: hsl(193, 100%, 96%);
}
.container {
width: 85%;
margin: 0 auto;
padding-top: 3rem;
}
nav {
display: flex;
justify-content: space-between;
}
.nav-btn {
font-family: inherit;
width: 11rem;
border-radius: 1.2rem;
background-color: #fff;
border: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
outline: none;
}
.main {
display: flex;
justify-content: space-between;
}
.main-text {
margin-top: 8.5rem;
width: 32rem;
}
.mockups {
margin-top: 4rem;
display: block;
height: auto;
width: 50%;
}
.main-btn {
color: #fff;
background-color: hsl(322, 100%, 66%);
width: 14.5rem;
height: 2.8rem;
border: none;
border-radius: 1.4rem;
outline: none;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
margin: .2rem .4rem;
}
/* Middle */
.middle {
width: 20%;
height: 100px;
background-color: blue;
}<head>
<meta charset="UTF-8">
<title>Huddle</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<nav>
<img class="logo" src="./images/logo.svg" alt="">
<button class="nav-btn">Try It Free</button>
</nav>
<div class="main">
<div class="main-text">
<h1>Built The Community <br> Your Fans Will Love</h1>
<p>Huddle re-imagines the way we build communities.
You have a voice, but so does your audience.
Create connections with your users as engage in genuine discussion.</p>
<button class="main-btn">Get Started For Free</button>
</div>
<img class="mockups" src="./images/illustration-mockups.svg" alt="">
</div>
</div>
</header>
<div class="middle">
<div class="grow"></div>
<div class="conv"></div>
<div class="users"></div>
</div>
</body>Just remove the width: 100vw; from the CSS of the body.
Other option is to use overflow-x: hidden; on the body.
Update
I think the horizontal scroll is present because of the vertical scroll bar, so when you set the width of the body to 100vw it causes overflow.
With this in mind, you can keep the width: 100vw; just set the max-width: 100%.
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 400;
color: hsl(192, 100%, 9%);
}
* {
box-sizing: border-box;
}
h1, h2 {
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
p {
font-size: 18px;
}
button {
font-family: 'Open Sans', sans-serif;;
font-weight: 700;
}
/* Header */
header {
height: 100vh;
width: 100%;
background-image: url(./images/bg-hero-desktop.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: hsl(193, 100%, 96%);
}
.container {
width: 85%;
margin: 0 auto;
padding-top: 3rem;
}
nav {
display: flex;
justify-content: space-between;
}
.nav-btn {
font-family: inherit;
width: 11rem;
border-radius: 1.2rem;
background-color: #fff;
border: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
outline: none;
}
.main {
display: flex;
justify-content: space-between;
}
.main-text {
margin-top: 8.5rem;
width: 32rem;
}
.mockups {
margin-top: 4rem;
display: block;
height: auto;
width: 50%;
}
.main-btn {
color: #fff;
background-color: hsl(322, 100%, 66%);
width: 14.5rem;
height: 2.8rem;
border: none;
border-radius: 1.4rem;
outline: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.6);
margin: .2rem .4rem;
}
/* Middle */
.middle {
width: 20%;
height: 100px;
background-color: blue;
}<html>
<head>
<meta charset="UTF-8">
<title>Huddle</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<nav>
<img class="logo" src="./images/logo.svg" alt="">
<button class="nav-btn">Try It Free</button>
</nav>
<div class="main">
<div class="main-text">
<h1>Built The Community <br> Your Fans Will Love</h1>
<p>Huddle re-imagines the way we build communities. You have a voice, but so does your audience. Create connections with your users as engage in genuine discussion.</p>
<button class="main-btn">Get Started For Free</button>
</div>
<img class="mockups" src="./images/illustration-mockups.svg" alt="">
</div>
</div>
</header>
<div class="middle">
<div class="grow"></div>
<div class="conv"></div>
<div class="users"></div>
</div>
</body>
</html>
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
