Ich versuche gerade die Elemente der Liste "song-playlist" richtig zu alignen...das funktioniert bei dem ersten auch gut(es ist derzeit alles harcodiert und das soll auch erstmal so bleiben). Jedoch bei den darauffolgenden Elementen ist ein kleiner Offset nach recht. Ich suche jetzt schon ewig nach dem Fehler...Ich hoffe einer von euch findet ihn 
Danke für eure Hilfe
Das ist ist die Section:
Hier ist der HTML Code:
Und hier der CSS:
Danke für eure Hilfe Das ist ist die Section:
Hier ist der HTML Code:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap" rel="stylesheet">
<title>Weybeatz | Home</title>
</head>
<body>
<nav class="nav-bar">
<ul>
<li><a class="logo-nav">Weybeatz</a></li>
<li><a class="active" href="index.html">Home</a></li>
<li><a id="beats" onclick="scrollToBeatsMethod()" href="#">Beats</a></li>
<li><a id="about" href="#">About Me</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
</nav>
<div class="main-box">
<div class="home-video">
<video playsinline autoplay muted loop poster>
<source src="/img/main_bg.mp4" type="video/mp4" disabled=disabled>
</video>
</div>
<div class="home-search">
<input class="desktop-search"
autocomplete="off"
type="search"
placeholder="What type of track are you looking for?" >
<button id="home-btn">SEARCH</button>
</div>
</div>
<div class="songs">
<ul class="playlist-header">
<li class="track-title"><a>NAME</a></li>
<li class="track-time"><a>TIME</a></li>
<li class="track-bpm"><a>BPM</a></li>
<li class="track-bpm"><a>TAGS</a></li>
</ul>
<ul class="song-playlist">
<li>
<ul class="song">
<li class="song-logo">
<img src="/img/tyga.jpg">
</li>
<li class="logo-song-spacer"></li>
<li class="song-name">
<a>LOCO</a>
</li>
<li class="song-duration">
<a>03:00</a>
</li>
<li class="song-bpm">
<a>125</a>
</li>
<li class="song-tags">
<ul>
<a>#spanish</a>
<a>#chill</a>
</ul>
</li>
<button class="buy-song">
$45.00
</button>
</ul>
</li>
<li>
<ul>
<li class="song-logo">
<img src="img/ski mask.jpg">
</li>
<li class="logo-song-spacer"></li>
<li class="song-name">
<a>SKIMASK</a>
</li>
<li class="song-duration">
<a>02:25</a>
</li>
<li class="song-bpm">
<a>160</a>
</li>
<li class="song-tags">
<ul>
<a>#weybeatz</a>
<a>#hardtrapbeat</a>
</ul>
</li>
<button class="buy-song">
$45.00
</button>
</ul>
</li>
<li>
<ul>
<li class="song-logo">
<img src="/img/Pablo escober.png">
</li>
<li class="logo-song-spacer"></li>
<li class="song-name">
<a>PABLO</a>
</li>
<li class="song-duration">
<a>02:56</a>
</li>
<li class="song-bpm">
<a>120</a>
</li>
<li class="song-tags">
<ul>
<a>#mexican</a>
<a>#chill</a>
</ul>
</li>
<button class="buy-song">
$45.00
</button>
</ul>
</li>
<li>
<ul>
<li class="song-logo">
<img src="/img/Diablo.png">
</li>
<li class="logo-song-spacer"></li>
<li class="song-name">
<a>DIABLO</a>
</li>
<li class="song-duration">
<a>02:15</a>
</li>
<li class="song-bpm">
<a>90</a>
</li>
<li class="song-tags">
<ul>
<a>#trap</a>
<a>#chill</a>
</ul>
</li>
<button class="buy-song">
$45.00
</button>
</ul>
</li>
<li>
<ul>
<li class="song-logo">
<img src="/img/MEDUSA.jpg">
</li>
<li class="logo-song-spacer"></li>
<li class="song-name">
<a>AFTERGLOW</a>
</li>
<li class="song-duration">
<a>02:54</a>
</li>
<li class="song-bpm">
<a>104</a>
</li>
<li class="song-tags">
<ul>
<a>#weybeatz</a>
<a>#chill</a>
</ul>
</li>
<button class="buy-song">
$45.00
</button>
</ul>
</li>
</ul>
</div>
<div class="about-me">
<img class="weybeats-logo"src="/img/Weybeatz LOGO.png">
<h1>About Me</h1>
<p>
What up! <br>
i have been producing beats for 2 years <br>
and live in germany. Producing beats is my hobby <br>
and I spend a lot of free time with it. <br>
My goal is to be successful with music in any case <br>
and to be able to live my life with music.
</p>
</div>
<div class="contact-me">
<h1>Contact Form</h1>
<input class="contact-name" placeholder="Enter your name">
<input class="contact-email" placeholder="Enter your email">
<input class="contact-phone" placeholder="Enter your phone number (optional)">
<input class="contact-message" placeholder="Enter your message">
<button>Sumbit Message</button>
</div>
<script src="main.js"></script>
</body>
</html>Und hier der CSS:
CSS:
html{
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
}
body{
background: #000000;
margin: 0;
padding: 0;
}
.nav-bar ul {
overflow: hidden;
list-style-type: none;
margin: 0;
padding: 0;
background: #000000;
}
.nav-bar ul li{
float: left;
}
.logo-nav{
font-weight: 800;
margin-right: 460px;
}
.nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav-bar li a:hover {
background-color: #111;
}
.active {
border-bottom: red;
}
input{
position: absolute;
width: 600px;
height: 50px;
border-radius: 50px;
border: hidden;
outline: none;
z-index: -30;
}
button{
position: relative;
background-color: #228B22;
color: #ffffff;
width: 120px;
height: 50px;
margin-left: 481px;
margin-top: 0px;
text-decoration: none;
border-radius: 50px;
border: hidden;
outline: none;
z-index: -20;
}
.home-search{
margin: 20%;
align-items: center;
justify-content: center;
}
.home-video video{
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: -100000;
}
.songs{
background: #000000;
position: absolute;
width: 100%;
height: 470px;
z-index: 10;
}
.song-playlist{
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
display: inline;
}
.song, .playlist-header{
list-style-type: none;
margin-top: 30px;
padding: 0;
display: flex;
}
.track-title{
margin-left: 100px;
}
.track-time{
margin-left: 200px;
}
.track-bpm{
margin-left: 30px;
}
.song-logo{
margin-left: 40px;
margin-top: 0;
margin-right: 0;
}
.song-logo img{
width: 30px;
height: 30px;
}
.song-name{
color: #ffffff;
margin-left: 30px;
}
.song-duration{
margin-left: 200px;
}
.song-bpm{
margin-left: 30px;
}
.song-tags{
margin-left: 50px;
}
.song-tags ul{
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.song-tags ul a{
margin-right: 10px;
}
.songs ul li a{
color: white;
}
.song-playlist li{
float: left;
display: block;
color: white;
margin-bottom: 0;
}
.song-playlist li ul button{
border-radius: 5px;
margin-left: 60px;
margin-top: -5px;
height: 30px;
width: 70px;
}
.about-me{
position: absolute;
background-color: #101010;
width: 100%;
height: 370px;
margin-top: 470px;
z-index: 10;
text-align: center;
}
.weybeats-logo{
float: left;
margin-top: 90px;
margin-left: 90px;
width: 150px;
}
h1{
color: white;
margin-top: 70px;
}
p{
color: white;
}
.contact-me{
position: absolute;
background-color: #000000;
width: 100%;
height: 470px;
margin-top: 840px;
z-index: 10;
text-align: center;
justify-content: center;
}
.contact-me h1{
margin-top: 5px;
color: white;
}
.contact-me input{
position: relative;
border-radius: 10px;
margin-bottom: 10px;
}
.contact-message{
height: 130px;
}
.contact-me button{
position: relative;
border-radius: 10px;
}
