how to remove whitespace from bootstrap container row col divs-CodePudding

I'm using bootstrap and I'm getting free space at the very left and right of my div instead of taking up the entire screen it looks like it's only taking up 99%

MY CODE:

#social-links {
  background-color : #242424;
  /* border        : .5px solid white; */
  text-align       : center;
  color            : white;
  margin-bottom    : -16px;
  margin-top       : -9px;
  margin-left      : 0px;
  }
#social-links a {
  color   : white;
  display : block;
  width   : 100%;
  padding : 2px;
  }
#social-links a:hover {
  transition       : 3s;
  background-color : white;
  color            : black;
  text-align       : center;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div >

<div >
    <div  id="social-links">
      <a href="#">Discord</a>
    </div>
    <div  id="social-links">
      <a href="#">Instagram</a>
    </div>
    <div  id="social-links">
      <a href="#">Twitter</a>
    </div>
  </div>
</div>

CodePudding user response：

The apparent white-space is just your background-color set on .social-links a. It's because you have width: 100%; set so on hover the entire area behind the word gets a white background. Set width: fit-content; and add margin: auto; on .social-links a

Also ~ you are using an ID three times, when an ID is unique to one HTML element. I changed social-links to a class.

.social-links {
  background-color: #242424;
  /* border: .5px solid white; */
  text-align: center;
  color: white;
  margin-bottom: -16px;
  margin-top: -9px;
  margin-left: 0px;
}

.social-links a {
  color: white;
  display: block;
  width: fit-content;
  margin: auto;
  padding: 2px;
}

.social-links a:hover {
  transition: 3s;
  background-color: white;
  color: black;
  text-align: center;
}

<div >
  <div >
    <div  ><a href="#">Discord</a>
    </div>
    <div  ><a href="#">Instagram</a>
    </div>
    <div  ><a href="#">Twitter</a>
    </div>
  </div>
</div>

CodePudding user response：

i fixed it the problem was with class row margin and padding FIXED:

Discord Instagram Twitter