1

The problem

When I run my code (shown later), There is a small indent on the left side of my code. I tried making the window smaller to see if it was just because the window was too big, but no luck. I also tried removing all margin and padding that I could find that might of been the cause, but as you may have guessed, no luck. I also tried making my footer bigger to cover up the indent, but that didn't work.

Questions

  • Why is there an indent on the side?
  • How can I fix the indent?
  • If there is in indent on the left side, why is there no indent on the right side?

code

body {
    font-family: "Lato", sans-serif;
    background: #0f0f0f;
}

.messages {
    color: #fff;
    bottom:0;
}

h1 {
    color: #fff;
    text-align: center;
}

h2 {
    color: #fff;
    padding-left: 25px;
}

.main {
    margin-left: 160px;
    font-size: 20px;
    padding: 0px 10px;
}

.main p {
    color: #fff;
    padding-left: 25px;
}

.main a {
    text-decoration: none;
    color: #fff;
}

.main a:hover {
    color: #aaaaaa;
}

.topnav {
    overflow: hidden;
    background-color: #0a0a0a;
}

input {
    background-color: #000000;
    color: #fff;
    border: 2px solid #fff;
    height: 25px;
    border-radius: 5px;
    font-size: 20px;
    margin-top: 7.5px;
}

.topnav a {
    float: left;
    color: #818181;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: white;
    cursor: default;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
    background-color: #505050;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
    <body>
        <div class="topnav">
            <a href="#">Back</a>
            <input id="search" type="text" placeholder="search for a member..." autocomplete="off">
        </div>
        <div class="main">
        </div>
        <div class="footer">
            <input type="text" name="Message" placeholder="Leave a message...">
        </div>
    </body>
</html>
Drake Krewson
  • 69
  • 1
  • 8

2 Answers2

2

The <body> has a default margin: 8px from the user agent stylesheet. If you add margin: 0 auto to the body, then that left space on your footer will go away.

body {
    font-family: "Lato", sans-serif;
    background: #0f0f0f;
    margin: 0 auto;
}

.messages {
    color: #fff;
    bottom:0;
}

h1 {
    color: #fff;
    text-align: center;
}

h2 {
    color: #fff;
    padding-left: 25px;
}

.main {
    margin-left: 160px;
    font-size: 20px;
    padding: 0px 10px;
}

.main p {
    color: #fff;
    padding-left: 25px;
}

.main a {
    text-decoration: none;
    color: #fff;
}

.main a:hover {
    color: #aaaaaa;
}

.topnav {
    overflow: hidden;
    background-color: #0a0a0a;
}

input {
    background-color: #000000;
    color: #fff;
    border: 2px solid #fff;
    height: 25px;
    border-radius: 5px;
    font-size: 20px;
    margin-top: 7.5px;
}

.topnav a {
    float: left;
    color: #818181;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: white;
    cursor: default;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
    background-color: #505050;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
    <body>
        <div class="topnav">
            <a href="4.html">Back</a>
            <input id="search" type="text" placeholder="search for a member..." autocomplete="off">
        </div>
        <div class="main">
        </div>
        <div class="footer">
            <input type="text" name="Message" placeholder="Leave a message...">
        </div>
    </body>
</html>
Tanner Dolby
  • 4,253
  • 3
  • 10
  • 21
-1

Maybe this is the solution as I understood your problem. So you want that there should be no spacing between your content and browser borders to it.

My try that I think should help you

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
    font-family: "Lato", sans-serif;
    background: #0f0f0f;
    margin: 0px;
}

.messages {
    color: #fff;
    bottom:0;
}

h1 {
    color: #fff;
    text-align: center;
}

h2 {
    color: #fff;
    padding-left: 25px;
}

.main {
    margin-left: 160px;
    font-size: 20px;
    padding: 0px 10px;
}

.main p {
    color: #fff;
    padding-left: 25px;
}

.main a {
    text-decoration: none;
    color: #fff;
}

.main a:hover {
    color: #aaaaaa;
}

.topnav {
    overflow: hidden;
    background-color: #0a0a0a;
}

input {
    background-color: #000000;
    color: #fff;
    border: 2px solid #fff;
    height: 25px;
    border-radius: 5px;
    font-size: 20px;
    margin-top: 7.5px;
}

.topnav a {
    float: left;
    color: #818181;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    color: white;
    cursor: default;
}

.footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 10px;
    text-align: center;
    background-color: #505050;
}
    </style>
</head>
<body>


        <div class="topnav">
            <a href="4.html">Back</a>
            <input id="search" type="text" placeholder="search for a member..." autocomplete="off">
        </div>
        <div class="main">
        </div>
        <div class="footer">
            <input type="text" name="Message" placeholder="Leave a message...">
        </div>

</body>
</html>
Mubashir Jamali
  • 141
  • 3
  • 4