My body width is so high and I cant figure why?-CodePudding

https://i.stack.imgur.com/jbeyI.png

Okay so I ran into antoher problem.

My body width is so high and I cant figure why??

I will paste code down bellow.

I tried reducing margins but it didnt work.

Tried looking for other answers but nothing.

https://i.stack.imgur.com/jbeyI.png

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

#header {
    background-color: #0f0f0f;
    border-radius: 80px;
    height: 100px;
    margin: 5px;
}

body {
    background-color: #080808;
}

nav {
    word-spacing: 15px;
    transform: translate(1200px,-50px);
}

ul {
    list-style-type: none;
    padding-right: 20px;
}

li {
    display: inline;
    padding: 7px;
}

li, p, h1, #footer{
    font-family: "Montserrat", sans serif;
    color: aliceblue;
}

h1{
 padding-left: 40px;
 padding-top: 30px;   
}

p {
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 30px;
}

a:visited {
    text-decoration: none;
    color: aliceblue;
}

a:active {
    text-decoration: none;
    color: aliceblue;
}

a:hover {
    text-decoration: none;
    border-color: black;
    border-style: solid;
    border-width: 2px;
    border-spacing: 100px;
}

a {
    text-decoration: none;
}

#left {
    width: 700px;
}

#right {
    float: right;
    width: 700px;
    transform: translate(0px, -258px);
}

#footer {
    clear: both;
    text-align: right;
    padding: 10px;
}

<!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="stylesheet" href="style.css">
    <title>Learning</title>
</head>
<header>
    <div id="header">
        <h1>Filip Moslavac</h1>
        <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="Contact Page/contact.html">Contact</a></li>
            <li><a href="Project Page/projects.html">Projects</a></li>
        </ul>
        </nav>
    </div>
</header>
<body>
<div id="content">
<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vulputate feugiat nulla ut aliquam. Cras condimentum vestibulum justo, nec blandit dui convallis non. Quisque gravida cursus odio, id porta diam molestie et. Ut dignissim enim blandit, volutpat neque non, ultrices lorem. Suspendisse potenti. Sed pulvinar ligula ut hendrerit pellentesque. Donec accumsan justo velit, nec auctor dui interdum non. Donec sem neque, pellentesque eu dignissim vitae, iaculis vel erat. Donec ante urna, maximus in ullamcorper a, rutrum in velit. Curabitur vulputate diam nec metus dictum, vel posuere nulla dapibus. Fusce arcu tortor, fringilla a vehicula nec, gravida vel libero. Nam at placerat ex, eget feugiat metus. Vestibulum a hendrerit orci. Sed convallis, mauris sed vulputate tempor, diam enim gravida dolor, sit amet commodo tortor erat in mi.</p>
</div>
<div id="footer">
Copyright &copy; 2021 Filip Moslavac
</div>
</body>
</html>

CodePudding user response：

If you inspect your code, you will detect that it's your nav bar that is too width

So remove this line in your nav CSS property transform: translate(1200px,-50px);