My div boxes aren't filling the width of my screen despite being 100%

Code Help
1

my div boxes aren’t filling the width of my screen despite being 100

it doesn’t fill width it leaves white dead space for no reason.

the div going completely across the screen

https://0b69e4cb-cb55-4c98-85d1-5f1ec8a8f9b7-00-2qww8zoaj9og6.riker.replit.dev/

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="bob">
    Hello world
  </div>
  <script src="script.js"></script>

  <!--
  This script places a badge on your repl's full-browser view back to your repl's cover
  page. Try various colors for the theme: dark, light, red, orange, yellow, lime, green,
  teal, blue, blurple, magenta, pink!
  -->
  <script src="https://replit.com/public/js/replit-badge-v2.js" theme="dark" position="bottom-right"></script>
</body>

</html>

CSS

html {
  height: 100%;
  width: 100%;
}

.bob{
  width: 100%;
  background-color: black;
  height: 20px;
  margin: 0px;
}
2

You need to link the repl itself, not the repl dev domain that only is hosted when you are in the workspace.

3

https://replit.com/@948crib/BlaringWaterloggedProgramminglanguage

4

The width of 100% is set to the html tag, not your div. In the styles, I see that the width of the div is 1500px, not 100%.

You should change the value of the width parameter to 100%.

.bob{
  width: 100%;
  background-color: black;
  height: 20px;
  margin: 0px;
  float: left;
}
1 Like
5

Sorry for the late message I have made this change and it still has the issue. I dont understand what is happening 100% should be 100% not 97% or whatever it is doing. I even tried changing to above 100% in desperation I still have the same issue

6

The fact is that the body tag has the margin parameter by default, so the div does not cover the entire width of the screen. You need to change the margin parameter of the body tag to 8px 0 to remove the margin in width, but keep it in height.

body {
  margin: 8px 0;
}
1 Like
7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.