CSS not applying if using PHP

I am using codeigniter and any data that is within the for loop doesn't have the CSS applied. The file is pointed correctly as all the other css works fine, however I can't find a solution to this anywhere

HTML :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE = html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('/assets/css/home.css')?>">
     <title>Spill.It</title>

</head>
<body>
    <header>
    <div id="gifLogo">
        <img src="<?php echo base_url('/assets/images/homelogo.gif')?>" width="100%" alt="Spill.It Logo">
     </div>
     </header>
<!-- Foreach loop to print all messages from the user. -->
<?php foreach ($messages as $row): ?>
    <div id=messageDisplay>
    <?php if ($row->user_username == null){
        echo '<p>Nothing has been spilt here yet sorry!</p>';
        }?>
    <h1><?php echo $row->user_username;?> : </h1><p><?php echo $row->text;?></p>
    <p id="time"> Posted At :<?php echo $row->posted_at;?></p>

    </div>  
<?php endforeach ?>
</div>
</body>
</html>

CSS (I haven't included all the css just the parts within the loop as my css file is very messy) :

#messageDisplay {
    text-align: center;
    padding-left: 10em;
    padding-right: 10em;
    border: 1px solid #4099ff;
    border-radius: 6px;
    box-shadow: 0 0 8px #4099ff;
    margin: 20px;
padding: 5px;   
}
#time {
    font-size: 2px;
}

Solution

In your code you are repeating the CSS IDs. CSS ID can be used once in the whole page as IDs must be unique.

You should use classes instead.

CSS

.messageDisplay {
    text-align: center;
    padding-left: 10em;
    padding-right: 10em;
    border: 1px solid #4099ff;
    border-radius: 6px;
    box-shadow: 0 0 8px #4099ff;
    margin: 20px;
    padding: 5px;   
 }
.time {
    font-size: 2px;
 }

PHP

 <div class="messageDisplay"> </div>