Html Question posted in
Some basic documentation can be found here.

Html – There is too much whitespace inside my border in CSS, how can I make the text fit inside borders?

enter image description here

Here’s my code so far

CSS CODE - * {
  box-sizing: border-box;
  margin: 0;
}

@media screen and (max-width: 600px) {
  header,
  .welcome {
    width: 100%;
  }
  .nav>ul {
    display: flex;
    justify-content: flex-end;
    right: 0;
    padding: 0;
    margin: auto;
  }
}

header {
  background-color: rgb(237, 239, 240);
  padding: 10% 10%;
  font-family: Helvetica;
  justify-content: space-evenly;
}

.welcome {
  display: block;
  text-align: center;
  margin-top: 50px;
  padding-bottom: 10%;
  border: white solid 4px;
  padding: 10px;
}

h2 {
  margin: 0;
  margin-bottom: 0.2rem;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
<header>
  <section class="welcome" id="welcome-section">
    <h2>Rishav Verma</h2>
    <p> Web Developer</p>
  </section>
</header>

The border has much whitespace and I can’t fix the border and text inside it

Tags:

2

Answers


  1. 0

    Just add width:fit-content to .welcome, it will take the width according to content and also make its parent e.g .header to be displayed in grid and align the content center for align it center on the page.

    CSS CODE - * {
  box-sizing: border-box;
  margin: 0;
}

@media screen and (max-width: 600px) {
  header,
  .welcome {
    width: 100%;
  }
  .nav>ul {
    display: flex;
    justify-content: flex-end;
    right: 0;
    padding: 0;
    margin: auto;
  }
}

header {
  background-color: rgb(237, 239, 240);
  padding: 10% 10%;
  font-family: Helvetica;
  display:grid;
  justify-content:center;
}

.welcome {
  display: block;
  text-align: center;
  margin-top: 50px;
  padding-bottom: 10%;
  border: white solid 4px;
  padding: 10px;
  width:fit-content;
}

h2 {
  margin: 0;
  margin-bottom: 0.2rem;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
    <header>
  <section class="welcome" id="welcome-section">
    <h2>Rishav Verma</h2>
    <p> Web Developer</p>
  </section>
</header>
    Login or Signup to reply.
  2. 0

    You don’t need all that code

    header {
  background-color: rgb(237, 239, 240);
  padding-block: 10%;
  display: flex;
}

.welcome {
  text-align: center;
  margin-inline: auto;
  border: white solid 4px;
  padding: 10px;
}

h2 {
  margin: 0 0 0.2rem;
}
    <header>
  <section class="welcome" id="welcome-section">
    <h2>Rishav Verma</h2>
    <p> Web Developer</p>
  </section>
</header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search