Jesse Elser Jesse Elser - 5 months ago 16
CSS Question

Header Stretching Too Far

I'm having trouble with one of my

<h2>
headers. I am using a single style for all of them but there is a particular header that is not working properly. [Screenshot Attached]

Here is my entire source code:

<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name="geo.placename" content="United States" />
<meta name="geo.position" content="x;x" />
<meta name="geo.region" content="usa" />
<meta name="ICBM" content="x,x" />

<meta property="og:title" content="Title"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://img.example.com/profile/display/mohawkSideView.jpg"/>
<meta property="og:url" content="http://profile.example.com"/>
<meta property="og:site_name" content="Title"/>
<meta property="og:description" content="Description"/>

<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="http://profile.example.com">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="http://img.example.com/profile/display/mohawkSideView.jpg">

<link rel="shortcut icon" href="http://img.example.com/profile/display/mohawkSideView.jpg" />
<link rel="apple-touch-icon" href="http://img.example.com/profile/display/mohawkSideView.jpg"/>
<link rel="icon" href="http://img.example.com/profile/display/mohawkSideView.jpg"/>

<link rel="stylesheet" href="http://profile.example.com/css/universal.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://profile.examle.com/js/ezslide.js" type="text/javascript"></script>
<script src="http://profile.example.com/js/equalHeight.js" type="text/javascript"></script>
</head>
<body>
<div id="profile-container">
<div id="profile-left" class="profile-column">
<div id="profile-image">
<img src="http://img.example.com/profile/display/mohawkSideView.jpg" alt="Jesse Toxik">
</div>
<div id="profile-info">
<ul>
<li><span>&#0046;</span> <b>Name:</b> Name</li>
<li><span>&#0083;</span> <b>Relationship:</b> X</li>
<li><span>&#0059;</span> <b>Birthday:</b> 02/05/1991</li>
<li><span>&#0058;</span> <b>Age:</b> 25</li>
<li><span>&#0117;</span> <b>Location:</b> City/State</li>
<li><span>&#0116;</span> <b>Zodiac:</b> Aquarius</li>
<li><span>&#094;</span> <b>Occupation:</b> PEVO</li>
<li><span>&#0114;</span> <b>Xbox:</b> Screen Name</li>
</ul>
</div> </div>
<div id="profile-right" class="profile-column">
<h2>Wednesday - Jun 15, 2016</h2>
<h1><b>[</b> Username <b>]</b></h1>
<h2>Welcome To My Domain</h2>
<div id="profile-status" class="profile-section">
<i>&#0063;</i> <b>Status:</b>
<p>
Status not available.
</p> </div>
<div id="profile-quote" class="profile-section">
<i>&#0063;</i> <b>Favorite Quotes:</b>
<ul id="profile-quote-rotator">
<li>One Persons Craziness Is Another Mans Reality - <u>Tim Burton</u></li>
<li>Every man is guilty of all the good he did not do. - <u>Voltaire</u></li>
<li>Thou shall not bow down before any graven image. - <u>Pinhead (Hellraiser II)</u></li>
<li>The scariest monsters are the ones that lurk within our souls. - <u>Edgar Allen Poe</u></li>
<li>If you have a quality, be proud of it. Let it define you, whatever it is. - <u>Pinhead (Hellraiser)</u></li>
</ul> </div>
<div id="profile-about" class="profile-section">
<h2>Who I Am</h2>
<p>
<a href="#">Lorem ipsum</a> dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p> </div>
<div id="profile-likes" class="profile-section">
<h2>Things I Like</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p> </div>
<div id="profile-dislikes" class="profile-section">
<h2>Things I Do Not Like</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p> </div>
<div id="profile-music" class="profile-section">
<h2>Music That Tickles My Fancy</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula rhoncus viverra. Pellentesque eleifend scelerisque neque et porta. Nullam sem sapien, tempor a laoreet eu, pulvinar at dolor. Ut ullamcorper blandit felis, ac tempor enim porta sed. Suspendisse est enim, accumsan sit amet interdum ut, convallis et lacus. Sed lobortis eget magna nec tristique. Donec ante quam, tincidunt eget tortor vitae, mollis ullamcorper arcu. Nulla facilisi. Phasellus lobortis molestie maximus. Etiam tellus nunc, pellentesque eu mattis a, consectetur at neque. Ut quam nisi, dapibus at accumsan in, pulvinar vitae sem. Maecenas vitae mattis risus.
</p> </div> </div>
<div id="profile-gallery">
<div id="profile-gallery-images">
<h2>Eye Candy</h2>
<a href="img.jpg">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
<a href="#">
<img src="img.jpg" alt="ALT TEXT">
</a>
</div> </div>
<div id="profile-footer">
<h2>&copy; 2015</h2> </div>
</div>


And my CSS[Which contains PHP for easy editing]:

header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

function hex2rgb($hex) {
$hex = str_replace("#", "", $hex);

if(strlen($hex) == 3) {
$r = hexdec(substr($hex,0,1).substr($hex,0,1));
$g = hexdec(substr($hex,1,1).substr($hex,1,1));
$b = hexdec(substr($hex,2,1).substr($hex,2,1));
} else {
$r = hexdec(substr($hex,0,2));
$g = hexdec(substr($hex,2,2));
$b = hexdec(substr($hex,4,2));
}
$rgb = array($r, $g, $b);
return implode(",", $rgb); // returns the rgb values separated by commas
}
date_default_timezone_set('America/New_York');
if( date( 'w' ) == 0 ) { // Sunday - Orange
$mainColorHex = "#ff6400";
}
if( date( 'w' ) == 1 ) { // Monday - Red
$mainColorHex = "#ff0000";
}
if( date( 'w' ) == 2 ) { // Tuesday - Lime Green
$mainColorHex = "#32cd32";
}
if( date( 'w' ) == 3 ) { // Wednesday - Neon Blue
$mainColorHex = "#67c8ff";
}
if( date( 'w' ) == 4 ) {
$mainColorHex = "#a020f0"; // Thursday - Purple
}
if( date( 'w' ) == 5 ) { // Friday - Yellow
$mainColorHex = "#ffff00";
}
if( date( 'w' ) == 6 ) { // Saturday - Light Gray
$mainColorHex = "#787878";
}
if( date('z') + 1 == 304 ) { // Halloween - Halloween Orange
$mainColorHex = "#ff9100";
}
$mainColorRGB = hex2rgb($mainColorHex);

?>
@import url('http://fonts.example.com/custom.css');
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
font-style: normal;
font-family: Helvetica;
}
body {
background-color: #212121;
background-image: url('');
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
text-align: center;
}
h1, h2, h3, h4, h5, h6 {
font-family: Orbitron;
margin-bottom: 5px;
}
h1, h2 {
text-align: center;
}
h1 {
padding: 10px;
padding-top: 15px;
font-size: 45px;
line-height: 50px;
font-variant: small-caps;
}
h2 {
text-align: center;
margin: 0 auto;
text-transform: uppercase;
display: table;
white-space: nowrap;
color: <?php echo $mainColorHex; ?>;
font-size: 16pt;
}
h2:before,
h2:after {
border-top: 2px solid #565656;
content: '';
display: table-cell;
position: relative;
top: 0.5em;
width: 45%;
}
h2:before {
right: 1.5%;
}
h2:after {
left: 1.5%;
}
i {
font-family: WebSymbolsLiga;
}
b {
color: <?php echo $mainColorHex; ?>;
}
u {
color: <?php echo $mainColorHex; ?>;
font-style: normal!important;
font-weight: bold;
}
p {
text-indent: 20px;
margin-bottom: 10px;
}
a:link, a:visited {
color: <?php echo $mainColorHex; ?>;
}
a:hover {
text-decoration: underline;
}
#profile-container {
width: 1040px;
margin: 0 auto;
padding: 20px;
display: block;
display: inline-block;
text-align: left;
background: #000;
}
#profile-left {
width: 300px;
float: left;
border-right: 1px solid #565656;
}
#profile-right {
width: 689px;
float: right;
padding-left: 20px;
padding-right: 20px;
}
#profile-image {
text-align: center;
margin-bottom: 5px;
}
#profile-image img {
width: 244px;
height: 244px;
border: 3px solid #565656;
}
#profile-info {
font-family: Helvetica;
width: 250px;
margin: 0 auto;
}
#profile-info > ul > li {
border: 1px solid <?php echo $mainColorHex; ?>;
margin-bottom: 10px;
padding: 5px;
border-radius: 10px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
background: -moz-linear-gradient(top, rgba(<?php echo $mainColorRGB; ?>,1) 0%, rgba(255,191,150,0) 59%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top, rgba(<?php echo $mainColorRGB; ?>,1) 0%,rgba(255,191,150,0) 59%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom, rgba(<?php echo $mainColorRGB; ?>,1) 0%,rgba(255,191,150,0) 59%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='<?php echo $mainColorHex; ?>', endColorstr='#00ffffff',GradientType=0 );
}
#profile-info > ul > li > span {
font-family: WebSymbolsLiga;
}
#profile-info > ul > li > i {
color: <?php echo $mainColorHex; ?>;
font-weight: bold;
}
.profile-section {
margin-bottom: 10px;
}
#profile-quote-rotator {
height: 18px;
line-height: 18px;
font-size: 16px;
}
#profile-quote-rotator > li {
text-indent: 30px;
font-style: Italic;
text-transform: capitalize;
}
#profile-gallery {
clear: both;
clear: all;
text-align: center;
}
#profile-gallery-images > a > img {
width: 200px;
height: 200px;
margin: 10px;
}
#profile-footer {
clear: both;
clear: all;
text-align: center;
}


And the screenshot:

Screenshot of two headers. One working and one not.

The copyright header is how the "eye candy" one should appear. With a gap on each side. I'm not sure why they are not the same.

I included my entire structural code to hopeully make this easier to solve.

Thank you in advance.

Answer

Specifically adding a width to the h2 seems to solve your issue:

h2 {
  text-align: center;
  margin: 0 auto;
  text-transform: uppercase;
  display: table;
  white-space: nowrap;
  color: <?php echo $mainColorHex; ?>;
  font-size: 16pt;

  /* Added */
  width:75%;
}

Doesn't have to be a percentage value, however.