CODEWITHSUNDEEP
htmlcss
ValerijMorra1
ValerijMorra1

Reputation: 1

I want to center text a little bit, but it jumps to a new line

I want to center text a little bit, but after I add even 1px of padding-left it jumps to a new line. I have 2 columns both take up 50% width of the screen, in 1 column is just photo, in 2 background color and text that I want to center.

This is my CSS:

.reviews__content {
    display:flex;
    flex-direction: column;
    width: 50%;
    justify-content: center;
    padding-left:
}

Upvotes: 0

Views: 79

Answers (3)

ValerijMorra1
ValerijMorra1

Reputation: 1

I fixed that with the following code:

.reviews__content {
    width: 50%;
    padding-left: 600px;
    text-align: center;
    justify-content: center;
    padding-top: 170px;
    position: absolute;
}

Upvotes: 0

Irin
Irin

Reputation: 1276

add box-sizing: border-box; to your code. this will help you to add padding without breaking it

.reviews__content {
  display: flex;
  flex-direction: column;
  width: 50%;
  justify-content: center;
  padding-left: 10px;
  box-sizing: border-box;
}
<div class="reviews__content">
  <img src="https://www.w3schools.com/w3css/img_forest.jpg" />
  <p>Text</p>
</div>

Upvotes: 1

Allan Souza
Allan Souza

Reputation: 16

Use width: calc(50% - 2px); on your reviews__content class.

I think this solves your problem.

Upvotes: 0

Related Questions