CODEWITHSUNDEEP
htmlcss
Benard Manuh
Benard Manuh

Reputation: 107

How can I bring back the right side of my border?

The right side of my 'Autumn outfits' border disappeared and i would like to know how i can get it back?

enter image description here

h3.outfitsbuttonsheadings {
	
	text-align: center;
	font-family:'Mali', cursive;

}

span.outfitsbuttonsheadings {
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
	border: 2px solid black; 
	
}

span.date {
	text-align: center;
	font-family: "Times New Roman";
	font-weight: normal;
	
}
<h3 class="outfitsbuttonsheadings">
			<span class="outfitsbuttonsheadings">Autumn outfits<br></span><span class="date">23 September, 2018</span>
		</h3>

Upvotes: 1

Views: 35

Answers (2)

MichaelvE
MichaelvE

Reputation: 2578

You had a br tag before the end of your first span:

h3.outfitsbuttonsheadings {
  text-align: center;
  font-family: 'Mali', cursive;
}

span.outfitsbuttonsheadings {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  border: 2px solid black;
}

span.date {
  text-align: center;
  font-family: "Times New Roman";
  font-weight: normal;
}
<h3 class="outfitsbuttonsheadings">
  <span class="outfitsbuttonsheadings">Autumn outfits</span><br><span class="date">23 September, 2018</span>
</h3>

Upvotes: 0

Obsidian Age
Obsidian Age

Reputation: 42304

The border disappears due to your invalid markup; you can't have a <br /> tag inside of a <span> tag, as the <span> tag only allows for phrasing content.

Simply moving the <br /> tag to after the <span> tag will restore the border:

h3.outfitsbuttonsheadings {
  text-align: center;
  font-family: 'Mali', cursive;
}

span.outfitsbuttonsheadings {
  text-align: center;
  padding-left: 4px;
  padding-right: 4px;
  border: 2px solid black;
}

span.date {
  text-align: center;
  font-family: "Times New Roman";
  font-weight: normal;
}
<h3 class="outfitsbuttonsheadings">
  <span class="outfitsbuttonsheadings">Autumn outfits</span>
  <br>
  <span class="date">23 September, 2018</span>
</h3>

Upvotes: 1

Related Questions