CSS File Displays Random Programming Language on website load

HTML-CSS
1

My Website displays random programming language off to left hand side of website.

2

Can you give us more information please? There’s no way we can diagnose the problem if we can’t see what it is, or see your code…

1 Like
3

Yup, sure, give me a minute.

4

Here is the link to my page where it displays the random programming language: B100D2024 Main Page

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>B100D2024 Main Page</title>
        <link rel="stylesheet" type="text/css" href="main.css"> 
        <link rel="canonical" href="http://b100d.site.nfoservers.com/b100d-index.html">
        <meta charset="utf-8">
        <meta name="description" content="Twitch Livestream of Call of Duty Call of Duty Warzone, Call of Duty Black OPS6 TDM, Call of Duty Black OPS6 Team Deathmatch, Pubg, The Finals, Quake 2, Battlefield2024, Battlefield 2024, Gaming Livestreams, Gaming Livestream">
  <meta name="keywords" content="Call of Duty Black OPS6, Call of Duty Black OPS6 TDM, Call of Duty Black OPS6 Team Deathmatch, Pubg, The Finals, Quake 2, Battlefield 2024, Battlefield2024">
  <meta name="author" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="google-site-verification" content="107134ky5x6_n3YbuZm8pxAk2YjtrYcmyeW8vSCNF0E">
    </head>
    <body>
<div class="container">
<div class="Item1">1</div>
<div class="Item2">2</div>
<div class="Item3">3</div>
<div class="Item4">4</div>
<div class="Item5">5</div>
<div class="Item6">6</div>
<div class="Item7">7</div>
<div class="Item8">8</div>
<div class="Item9">9</div>
<div class="Item10">10</div>
<div class="Item11">11</div>
<div class="Item12">12</div>
</div>
    </body>
</html>

*
{
   display: flex;
   justify-content: center;
   
   
}
 
h1
{
   font-size: 25px;
}

   .container 
{
     
   
      display: grid; 
      grid-template-columns: 750px 750px 750px 750px; 
      grid-template-rows: 250px 250px 250px 250px;
      text-overflow: hidden;
      grid-template-areas: 
        "Item1 Item2 Item3 Item4"
        "Item5 Item6 Item7 Item8"
         "Item9 Item10 Item11 Item12"; 
       
    }




.Item1
{
background-color: rgb(83, 83, 83);
grid-area: Item1
}

.Item2
{
   background-color: rgb(83, 83, 83);
   grid-area: Item2
}

.Item3
{
   background-color: rgb(83, 83, 83);
   grid-area: Item3
}

.Item4
{
   background-color: rgb(83, 83, 83);
   grid-area: Item4
}

.Item5
{
   background-color: rgb(83, 83, 83);
   grid-area: Item5
}

.Item6
{
   background-color: rgb(83, 83, 83);
   grid-area: Item6
}

.Item7
{
   background-color: rgb(83, 83, 83);
   grid-area: Item7
}

.Item8
{
   background-color: rgb(83, 83, 83);
   grid-area: Item8
}

.Item9
{
   background-color: rgb(83, 83, 83);
   grid-area: Item9
}

.Item10
{
   background-color: rgb(83, 83, 83);
   grid-area: Item10
}

.Item11
{
   background-color: rgb(83, 83, 83);
   grid-area: Item11
}


.Item12
{
   background-color: rgb(83, 83, 83);
   grid-area: Item12
}
5

image
image1920Ă—1080 209 KB

6

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

I don’t know exactly what’s going on but it’s something to do with a base64 encoded font in a style tag in your document head here:

Untitled
Untitled1920Ă—907 97.4 KB

8

I honestly don’t understand how to read this? I am quite sure this is developer tools, but I don’t comprehend how to see where this is?

9

It is because of this selector.

* {
  display: flex;
  justify-content: center;
}

You are changing the default style of display: none that are on style elements.

1 Like
10

Yea, I had just figured out what was causing it before you posted this. Thanks for the help, much appreciated.

11

I figured it out, as did a another guy in here. The issue was that css code you can put in that overrides everything else. Apparently it didn’t like the display being set to flex