Text not fitting at top of box-CodePudding

I am making a site and the text that says what's new in the code snippet below is not fitting at the top of the box I created.

:root {
  --border-width: 100px;
  --border-height: 200px;
  --border-color: #000;
  --box-color: #A8CCC9;
  --background-color: #75B9BE;
}


.lftSector {
  border-style: dashed;
  width: var(--border-width, 100px);
  height: var(--border-height, 200px);
  padding: 50px;
  border: 6px solid var(--border-color, gray);
  background-color: var(--box-color);
}
body {
  background-color: var(--background-color);
}
ol {
  width: var(--border-width);
    float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
  <title>Gallery</title>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Source Code Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
<link href="gstyle.css" rel="stylesheet">
</head>
<body>
  <h1> Welcome to the gallery</h1>
  <div class="lftSector">
    <h1 class="content">What's New?</h1>
    <ol>
      <a href="linkoftruth" ><li><div id="beta">[BETA]</div> Transformation</li></a>
      </ol>
    </div>
</body>
</html>

As you see, this makes a background with a box and text. Please show me how to position the <h1> at the top of the box with the border I created.

CodePudding user response：

There were a few problems with your code. Firstly, the header was being smushed, because you used padding to give your div its size, as opposed to a width and a height. Next, you were calling on variables from :root, but also trying to pass values into those variables. To achieve your solution, I fixed the issues mentioned, as well as created two new div sections - one for the header, and one for the list. Also, you were wrapping your li elements in a tags. It should be the other way around.

:root {
  --border-width: 100px;
  --border-height: 200px;
  --border-color: #000;
  --box-color: #A8CCC9;
  --background-color: #75B9BE;
}

body {
  background-color: var(--background-color);
}

.lftSector {
  width: 300px;
  height: 300px;
  border: 6px solid var(--border-color, gray);
  background-color: var(--box-color);
}

.lftSector > div {
  width: 100%;
  text-align: center;
  height: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#content {
  width: 100%;
  height: 80%;
}

  <h1> Welcome to the gallery</h1>
  <div class="lftSector">
    <div>
      <h1 class="content">What's New?</h1>
    </div>
    <div id="content">
      <ol>
        <li><a href="linkoftruth"><span id="beta">[BETA]</span>Transformation</a></li>
      </ol>
    </div>
  </div>

Additionally, I'd recommend usually setting your widths to be percentages, or based on vw/vh. Just a tip.

CodePudding user response：

This should help. That 50 px padding was removed and then width and min-width were used to control the width of the box. Also applied margin css to the h1.

:root {
  --border-width: 100px;
  --border-height: 200px;
  --border-color: #000;
  --box-color: #A8CCC9;
  --background-color: #75B9BE;
}

.lftSector {
  border-style: dashed;
  width: 50%;                   /* changed */
  min-width: 200px;             /* added */
  height: var(--border-height, 200px);
  border: 6px solid var(--border-color, gray);
  background-color: var(--box-color);
}

body {
  background-color: var(--background-color);
}

ol {
  width: var(--border-width);
  float: left;
}

.content {              /* added */
  margin: 0 .5rem;      /* added */
}                       /* added */

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://Wick-Gallery.nikhilharry.repl.co/style.css">
  <title>Gallery</title>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Source Code Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap" rel="stylesheet">
  <link href="gstyle.css" rel="stylesheet">
</head>

<body>
  <h1> Welcome to the gallery</h1>
  <div class="lftSector">
    <h1 class="content">What's New?</h1>
    <ol>
      <a href="linkoftruth">
        <li>
          <div id="beta">[BETA]</div> Transformation</li>
      </a>
    </ol>
  </div>
</body>

</html>