Header Stretching Too Far

Question

I'm having trouble with one of my

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:




 Title

 
 
 
 

 
 
 
 

 
 
 
 
 
 

 
 
 
 
 

 
 
 

 

 
 
 



 
    
   
  
  
   
    . Name: Name
    S Relationship: X
    ; Birthday: 02/05/1991
    : Age: 25
    u Location: City/State
    t Zodiac: Aquarius
    ^ Occupation: PEVO
    r Xbox: Screen Name
   
  
 
 
    Wednesday - Jun 15, 2016
  [ Username ]
  Welcome To My Domain
  
   ? Status:
   
Status not available.
  
  
   ? Favorite Quotes: 
   
 One Persons Craziness Is Another Mans Reality - Tim Burton
 Every man is guilty of all the good he did not do. - Voltaire
 Thou shall not bow down before any graven image. - Pinhead (Hellraiser II)
 The scariest monsters are the ones that lurk within our souls. - Edgar Allen Poe
 If you have a quality, be proud of it. Let it define you, whatever it is. - Pinhead (Hellraiser)
   
   
    Who I Am
    
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.


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.
   
   
    Things I Like
    
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.


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.
   
   
    Things I Do Not Like
    
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.


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.
   
   
    Music That Tickles My Fancy
    
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.


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.
   
 
 
  
 Eye Candy
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
  
 
 
 
  © 2015

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: ;
  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: ;
}
u {
   color: ;
   font-style: normal!important;
   font-weight: bold;
}
p {
   text-indent: 20px;
   margin-bottom: 10px;
}
a:link, a:visited {
   color: ;
}
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 ;
   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(,1) 0%, rgba(255,191,150,0) 59%, rgba(255,255,255,0) 100%);
   background: -webkit-linear-gradient(top, rgba(,1) 0%,rgba(255,191,150,0) 59%,rgba(255,255,255,0) 100%);
   background: linear-gradient(to bottom, rgba(,1) 0%,rgba(255,191,150,0) 59%,rgba(255,255,255,0) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='', endColorstr='#00ffffff',GradientType=0 );
}
#profile-info > ul > li > span {
   font-family: WebSymbolsLiga;
}
#profile-info > ul > li > i {
   color: ;
   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:

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.

Wes Foster · Accepted 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: ;
  font-size: 16pt;

  /* Added */
  width:75%;
}

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

Header Stretching Too Far

Answers (1)

Related Questions