i'ven been search in stackoverflow about this problem, but still stuck. I don't get it how it works, because i'm still very beginner in HTML and CSS language. I couldn't find how to fix this, and its still more than 100% width...
Any solutions or advices is very apreciated :))) Thank youu.
Here's my HTML Code :
@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-font-feature-settings: auto;
font-feature-settings: auto;
-webkit-font-kerning: auto;
font-kerning: auto;
line-height: 40.677px;
line-height: 2.54237rem;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
body{
display: flex; /* or css grid for more intricate layouts */
flex-direction: column;
margin: 0;
padding: 0;
min-width: fit-content;
}
.content1 {
width: 100vw;
height: 900px;
min-height: fit-content;
max-height: 100%;
padding: 0%;
position: absolute;
top: 0;
left: 0;
margin: 0 auto;
background: #255F63;
}
.content2{
position: absolute;
height: 1000px;
left: 0px;
top: 900px;
background: #DB7B65;
}
.content3{
position: absolute;
height: 1942px;
left: 0px;
top: 1900px;
background: #ECB865;
}
.container1-content3{
position: absolute;
height: 1063px;
left: 0px;
top: 1px;
background: #ECB865;
}
.container1-content3>.headline{
position: absolute;
width: 434.89px;
height: 72.61px;
left: 205.93px;
top: 167.52px;
font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 64px;
text-align: center;
color: #DB7B65;
}
.container1-content3>h2{
position: absolute;
width: 1233px;
height: 143px;
left: 107px;
top: 863px;
font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 36px;
line-height: 48px;
text-align: justify;
color: #E5E5E5;
}
.container2-content3{
position: absolute;
height: 878px;
left: 0px;
top: 1064px;
}
.content4{
position: absolute;
height: 1038px;
left: 0px;
top: 3842px;
background: #695356;
}
.headline1> h1{
position: absolute;
width: 708px;
height: 192px;
left: 154px;
top: 190px;
font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 72px;
line-height: 96px;
color: #ECB865;
}
.headline1>h2{
position: absolute;
width: 489px;
height: 128px;
left: 154px;
top: 382px;
font-family: Playfair Display;
font-style: normal;
font-weight: normal;
font-size: 48px;
line-height: 64px;
color: #FBC9BE;
}
.headline2>h1{
position: absolute;
width: 387px;
height: 96px;
left: 137px;
top: 207px;
font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 72px;
line-height: 96px;
/* identical to box height */
color: #FBC9BE;
}
.headline2>h2{
position: absolute;
width: 531px;
height: 64px;
left: 137px;
top: 303px;
font-family: Playfair Display;
font-style: normal;
font-weight: normal;
font-size: 48px;
line-height: 64px;
/* identical to box height */
color: #ECB865;
}
.headline2>h3{
position: absolute;
width: 657px;
height: 192px;
left: 137px;
top: 441px;
font-family: Playfair Display;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: 48px;
text-align: justify;
color: #E5E5E5;
}
.headline2>h4{
position: absolute;
width: 340px;
height: 24px;
left: 137px;
top: 697px;
font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 24px;
/* identical to box height */
font-variant: small-caps;
color: #E5E5E5;
}
.headline3{
position: absolute;
width: 1248px;
height: 210px;
left: 95px;
top: 56px;
}
.headline3>h1{
position: absolute;
width: 489px;
height: 96px;
left: 475px;
top: 56px;
font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 72px;
line-height: 96px;
/* identical to box height */
color: #ECB865;
}
.headline3>h2{
position: absolute;
width: 1248px;
height: 95px;
left: 95px;
top: 171px;
font-family: Playfair Display;
font-style: normal;
font-weight: normal;
font-size: 36px;
line-height: 48px;
text-align: center;
color: #E5E5E5;
}
.headline3b{
position: absolute;
width: 460px;
height: 48px;
left: 474px;
top: 305px;
}
.headline3b>.btn-learn{
position: absolute;
width: 194px;
height: 48px;
left: 474px;
top: 305px;
font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 36px;
line-height: 48px;
/* identical to box height */
text-align: justify;
color: #ECB865;
}
.headline3b>.btn-shop{
position: absolute;
width: 164px;
height: 48px;
left: 770px;
top: 305px;
font-family: Playfair Display;
font-style: normal;
font-weight: bold;
font-size: 36px;
line-height: 48px;
/* identical to box height */
text-align: justify;
color: #ECB865;
}
/*# sourceMappingURL=styles.css.map */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<link rel="stylesheet" href="styles.css">
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.3.7/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.7/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.7/dist/js/uikit-icons.min.js"></script>
</head>
<body>
<div class="content1">
<div class="headline1">
<h1>Let’s see,
What fucking happen</h1>
<h2>in the world that never
we see before</h2>
</div>
</div>
<div class="content2">
<div class="headline2">
<h1>Seventeen - </h1>
<h2>wear something you love</h2>
<h3>
Jadi gini gais, kita adalah faishionistha yang kecebadai dan terkenal gile banget anjir. Bisa nih jadi referensi buat kamu yang lagi bosen sama lo pada anjay!
</h3>
<h4>
a girl sitting on chair - 24-03-2020
</h4>
</div>
</div>
<div class="content3">
<div class="container1-content3">
<span class="headline">
Simple yet pretty.
</span>
<h2>
Jadi gini gais, kita adalah faishionistha yang kecebadai dan terkenal gile banget anjir. Bisa nih jadi referensi buat kamu yang lagi bosen sama lo pada anjay!
</h1>
</div>
<div class="container2-content3">
</div>
</div>
<div class="content4">
<div class="headline3">
<h1>pre-order now</h1>
<h2>Jadi gini gais, kita adalah faishionistha yang kecebadai dan terkenal gile banget anjir.</h2>
</div>
<div class="headline3b">
<span class="btn-learn">Learn More</span>
<span class="btn-shop">Shop Now</span>
</div>
</div>
</body>
</html>You need to add the following to your body tag css:
overflow-x: hidden;