White Space on Sides of Feedback Button

I’ve been working to implement a feedback button for an app. The desired design is an all black button with white text. It’s almost there, with the alignment and placement of the text being where we want it, however for some reason only the middle of the button is black, with the top and bottom of it being white. I’ve tried messing around with some of the properties, adjusting height, width, and some of the margin and padding properties, however I can’t seem to isolate what’s causing the issue. I haven’t had a crazy amount of experience with CSS, so I’m thinking maybe there’s something that I’m missing, but I’m not sure. If anyone could help me figure out what’s causing this that would be super appreciated. Attached is the CSS code associated with the button, and a screenshot of what the button currently looks like. The negative height property in the “after” tag was part of me trying to get the text to fit right within the button. I don’t believe it affects the white space on the button. For some reason it’s not listed as an option, but the Mendix version is 8.6.8. Thanks! .sprintrFeedback__sidebar_button--feedback {   background: black;   /* margin: 0px;   padding: 0px; */   background-image: none; }   .sprintrFeedback__sidebar_button {   height: 100px;   width: 100px;   margin: 0px;   vertical-align: middle;   background-image: none;   background: black; }   .sprintrFeedback__sidebar_button:last-child:after {   display: block;   background: black;   /* margin: 0px;   padding: 0px; */ }   .sprintrFeedback__sidebar_button:after {     content: "FEEDBACK";     color: white;     background: black;     transform: rotate(90deg);     text-align: center;     vertical-align: middle;     position: initial;     line-height: 50px;     height: -70px;     width: 70px; }  
1 answers

Press CTRL+Shift+C in the browser and move mouse over the white area or nearby it when you see that you have that element selected whose part is this white color. Select that element. You can also follow HTML in the inspect element “Elements” tab  (right click on page then inspect )
You can also try adding CSS there and see live changes. Just find what element is that, see if any background is applied.
Try background: black !important; to make sure your CSS is not over written by any other CSS rule. 

If you app is online, please share a live link. I can help you with the correct CSS then. 

Using !important is not recommended. I mentioned for debugging purpose only. You have to increase specificity of your CSS rule if some other rule is overwriting it (instead of using !important to solve the issue)