# How to reduce width of HTML text

**URL:** <https://forum.freecodecamp.org/t/how-to-reduce-width-of-html-text/165697>\
**Category:** General\
**Created:** [December 28, 2017, 10:11am UTC](https://forum.freecodecamp.org/t/how-to-reduce-width-of-html-text/165697 "2017-12-28T10:11:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![danielg](https://avatars.discourse-cdn.com/v4/letter/d/f0a364/32.png) [@danielg](https://forum.freecodecamp.org/u/danielg)\
**Post date:** [December 28, 2017, 10:11am UTC](https://forum.freecodecamp.org/t/how-to-reduce-width-of-html-text/165697/1 "2017-12-28T10:11:20Z")

</div>

I am trying to reduce the width of a piece of text under an image that only takes up about 50% of the screen, so I’ve tried using style = width:50% but for some reason, the width stays the same.  
[Here is the output I get.](https://imgur.com/a/Dr50o)  
I want it so that the caption is neatly contained under the image.  
Any hints on what I’m doing wrong?

My code:

```auto
<div class="text-center">
  <h1>Evelyn Lauder </h1>
  <h5 class="font-italic"> 1936-2011</h5>
  <img src=h ttp://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg alt="Evelyn Lauder" </img> <br>
</div>
<div style= width: 50%; class="text-center font-italic">
  <h7> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
</div>

```

---

<div class="post-metadata">

**Author:** ![tetchi](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/tetchi/32/160616_2.png) [@tetchi](https://forum.freecodecamp.org/u/tetchi)\
**Post date:** [December 28, 2017, 5:06pm UTC](https://forum.freecodecamp.org/t/how-to-reduce-width-of-html-text/165697/2 "2017-12-28T17:06:11Z")

</div>

It looks like you’re missing double quotes around `width: 50%;` which might be affecting the parsed style. Also make sure that your `<img` tag is closed properly.

`<img src=h ttp://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg alt="Evelyn Lauder" </img> <br>`

should be:

`<img src="http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt="Evelyn Lauder" /> <br />`

---

<div class="post-metadata">

**Author:** ![danielg](https://avatars.discourse-cdn.com/v4/letter/d/f0a364/32.png) [@danielg](https://forum.freecodecamp.org/u/danielg)\
**Post date:** [January 10, 2018, 6:36am UTC](https://forum.freecodecamp.org/t/how-to-reduce-width-of-html-text/165697/3 "2018-01-10T06:36:31Z")

</div>

I did those changes, and now the text-width works now, but now [the text isn’t centered anymore.](https://imgur.com/a/VV4xn)

New Code:

```auto
<div class="text-center">
  <h1>Evelyn Lauder </h1>
  <h5 class="font-italic"> 1936-2011</h5>
  <img src="http://i.telegraph.co.uk/multimedia/archive/02093/lauder_2093473b.jpg" alt="Evelyn Lauder" /> <br /><br>
</div>
<div style= "width: 50%"; class="text-center font-italic">
  <h7> "Evelyn Lauder was an Austrian American businessman who was well known for popularzing the pink ribbon associated with breast cancer awareness." </h7>
</div>

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:13pm UTC](https://forum.freecodecamp.org/t/how-to-reduce-width-of-html-text/165697/5 "2021-01-16T17:13:03Z")

</div>