0

i found the solution: i removed display: inline-block; because i only got that from this http://www.dynamicdrive.com/forums/showthread.php?66277-border-only-around-text-not-full-container-width

i instead did:

width: 300px; because the length of the text is 300px and then margin: auto; worked(it didn't work when i did display: inline-block;.) now it the border doesn't cover too much space and it's centered

thanks everyone that tried to help

I want the border to not take up so much unnecessary space, just cover the text. So i used display: inline-block;.

what it looks like with display: inline-block;

But it's not centered so i put margin-left: 550px; and margin-right: 550px;.

how it looks with margins

Now it's centered but it breaks when I resize the browser and it might be off-center on different resolution monitors. How do i make it like "1234"(the text under) which can resize itself?

image of when the browser is resized

Thank you in advance.

tim
  • 52
  • 5
  • 1
    search for responsive .. [link](https://www.w3schools.com/html/html_responsive.asp) – kingbon Oct 27 '18 at 05:06
  • What do you mean by the "1234" text resizing itself? – symlink Oct 27 '18 at 05:35
  • sorry if what im saying doesnt make sense, like i said, im new. when i resize the browser, the border also changes size. – tim Oct 27 '18 at 05:56
  • If possible please upload your html and css so that you can get exact solution. – Gaurav Oct 27 '18 at 07:25
  • Questions seeking debugging help ("why isn't/how to make this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See: How to create a [mcve]. – Asons Oct 27 '18 at 08:46
  • Why are you using `inline-block`? Can you show some code? – enxaneta Oct 27 '18 at 08:46

1 Answers1

-3
margin: 0 auto;

add css for margin and may be you need to set width also

raviramani
  • 522
  • 2
  • 14