0

I have an element that has styling like so:

h1#myId {
    float: left;
    width: 760px;
    height: 40px;
    font-family: Lato,Helvetica,Arial,sans-serif;
    font-size: 28px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    text-align: left;
    color: #373739;}

I would like to change this particular h1 to display:flex;justify-content:space-between; using inline styles. I can't figure out how to clear the width attribute however.

Currently it looks something like:

<h1 id="myId" style="width: 784px;font-family: Lato,Helvetica,Arial,sans-serif;">

I would like to change it to:

<h1 id="myId" style="font-family:Lato,Helvetica,Arial,sans-serif;display:flex;justify-content:space-between;">

But I still have the width attribute in the CSS class that I don't want there.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Eric
  • 2,861
  • 6
  • 28
  • 59
  • did you try to use "!important" ? – Dev Sep 07 '21 at 17:49
  • try using `width:auto;` when you set your flexbox. – Martin Sep 07 '21 at 17:50
  • In general inline styles will override what you provide. If you do not provide a width attribute inline it will inherit from the css class. So you sort of have a few of options. 1. remove the width from the css and put that in more specific places. 2. add width to inline. 3. try some fancy dynamic width prop. – FujiRoyale Sep 07 '21 at 17:55
  • Why are you trying to use an H2 element as a flex container? This smells of poor coding. Please [**read this Q&A**](https://stackoverflow.com/questions/5895082/can-a-small-tag-be-inside-an-html5-heading-i-e-h1-h2-h3-etc) for the details why. – Martin Sep 07 '21 at 17:56

0 Answers0