Html - White space when using width even though background is colored

xxxVxxxlinux
August 27, 2024
52 views
0 votes
2 Answers

I’m trying to make this DIV smaller using width property, but that just creates awkward white space even though I colored the html element on top of the page with !important to override my Bootstrap file. How do I fix this?

My code:

{
  background: linear-gradient(360deg, rgb(47, 24, 33), rgb(38, 14, 24)) no-repeat !important;
  background-size: cover;
  min-height: 100%;
  margin: 0px;
  padding: 0px;
}

.navbar a {
  text-decoration: none;
  font-size: larger;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffd6bd;
  padding-left: 15px;
  padding-right: 15px;
}

.navbar {
  background-color: rgb(50, 19, 32);
}

.spacer {
  background-color: rgb(47, 24, 33);
  padding: 50px;
}

.about-me {
  background-color: rgb(38, 14, 24);
  color: wheat;
  display: flex;
  justify-content: center;
  padding: 50px;
  outline: wheat solid 1px;
  outline-offset: -1rem;
  width: 70%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="navbar">
    <div class="container-fluid"></div>
    <a href="about">About Me</a>
    <a href="projects">Projects</a>
    <a href="blog">Blog</a>
    <a href="contact">Contact</a>
    </div>
  </nav>
  <div class="spacer"></div>
  <section class="about-me">
    About Me

  </section>



</body>

</html>

Edit: Okay, fixed it so it includes HTML code!

Tags: css html

Answers

It’s a bit silly mistake I guess, but you forgot to add * to the first line of css code:

* {
  background: linear-gradient(360deg, rgb(47, 24, 33), rgb(38, 14, 24)) no-repeat !important;
  background-size: cover;
  min-height: 100%;
  margin: 0px;
  padding: 0px;
}

.navbar a {
  text-decoration: none;
  font-size: larger;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  color: #ffd6bd;
  padding-left: 15px;
  padding-right: 15px;
}

.navbar {
  background-color: rgb(50, 19, 32);
}

.spacer {
  background-color: rgb(47, 24, 33);
  padding: 50px;
}

.about-me {
  background-color: rgb(38, 14, 24);
  color: wheat;
  display: flex;
  justify-content: center;
  padding: 50px;
  outline: wheat solid 1px;
  outline-offset: -1rem;
  width: 70%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="navbar">
    <div class="container-fluid"></div>
    <a href="about">About Me</a>
    <a href="projects">Projects</a>
    <a href="blog">Blog</a>
    <a href="contact">Contact</a>
    </div>
  </nav>
  <div class="spacer"></div>
  <section class="about-me">
    About Me

  </section>



</body>

</html>

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="container-fluid d-flex justify-content-center">
            <a href="about">About Me</a>
            <a href="projects">Projects</a>
            <a href="blog">Blog</a>
            <a href="contact">Contact</a>
        </div>
    </nav>
    <div class="spacer"></div>
    <section class="about-me">
        About Me
    </section>
</body>
</html>

Here’s your adjusted CSS:

html, body {
    background: linear-gradient(360deg, rgb(47, 24, 33), rgb(38, 14, 24)) no-repeat !important;
    min-height: 100%;
    margin: 0px;
    padding: 0px;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Keeps everything centered */
}

.navbar a {
    text-decoration: none;
    font-size: larger;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #ffd6bd;
    padding-left: 15px;
    padding-right: 15px;
}

.navbar {
    background-color: rgb(50, 19, 32);
    width: 100%;
    padding: 15px 0;
}

.spacer {
    background-color: rgb(47, 24, 33);
    padding: 50px;
    width: 100%;
}

.about-me {
    background-color: rgb(38, 14, 24);
    color: wheat;
    display: flex;
    justify-content: center;
    padding: 50px;
    outline: wheat solid 1px;
    outline-offset: -1rem;
    width: 70%;
    margin: 0 auto;
}

EDIT: Ive revised the code.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – White space when using width even though background is colored

Answers