Why is this code not changing my span color?

HTML-CSS
1 
      <div class="container">
        <div id="branding">
          <h1><span class="highlight">asd asd</span> | Front End Web Developer |</h1>
        </div>
		
        <nav>
		
		 </div>
      
    </header>

.highlight{
  color: #fff;
  font-weight:bold;
}
2

That works fine for me. I recommend closing your <'nav> tag, adding a <'header> tag and ensuring that your css file is properly linked to your html file. I tested via a plain html file viewed on chrome:


<style>
.highlight{
  color: #fff;
  font-weight:bold;
}
</style>

	<div class="container">
        <div id="branding">
          <h1><span class="highlight">asd asd</span> | Front End Web Developer |</h1>
        </div>
		
        <nav>
		
	</div>
    </header>
3

Also I added an image with a class rocket and in my css I wrote .rocket { width: 100%;
height: 300px;}

and it didn’t resize it. I want those dimensions. wtf? help?

4

Also added an h1 tag with the css of text-align center

h1 {
text-align: center; 

}

and it doesn’t center it. wtf?

5

Also why isn’t flex box working?

I want to center my icons.

.container {
	display: flex;
}

.box 1 {
	display: 1;
}

.box 2 {
	display: 2;
}

   <section id="boxes">
      <div class="container">
        <div class="box1">
          <img src="./img/logo_html.png">
          <h3>HTML5</h3>
          <p>I format my code, know proper tags, and learn proper ways fast.</p>
        </div>
        <div class="box2">
          <img src="./img/logo_css.png">
          <h3>CSS3</h3>
          <p>I know how to style web pages, add animations and transitions<p>
        </div>
       </div>
    </section>
6

Also my animation isn’t working.


    <section id="boxes">
      <div class="container">
        <div class="box1">
          <img src="./img/logo_html.png">
          <h3>HTML5</h3>
          <p>I format my code, know proper tags, and learn proper ways fast.</p>
        </div>
        <div class="box2">
          <img src="./img/logo_css.png">
          <h3>CSS3</h3>
          <p>I know how to style web pages, add animations and transitions<p>
        </div>
       </div>
    </section>

.box 1 {
	display: 1;
	animate: slidein;
	animation-duration: 3s;
}

.box 2 {
	display: 2;
	animate: slidein2;
	animation-duration: 3s;
	
}

@keyframes slidein {
	0%{left: -700px;}
	100%{left: 0;}
}


@keyframes slidein2 {
	0%{right: -700px;}
	100%{right: 0;}
}
7

Center of what? You set text align center in a container. Just saying h1 align center it doesnt know what to do.

Your classnames are box1 box2 but your css is .box 1, .box 2
Remove the spaces.

8

center of the webpage …

9

The text-align property specifies the horizontal alignment of text in an element.

You dont set it to the h1 tag, you set it on the container that has the text in it.

10

lol so you’re saying you cant set the h1 tag to center? it HAS to be in a div?

11

Why isn’t my animation working?

#box3 {
	animation: leftslide;
	animation-duration: 3s;
}

@keyframes leftslide {
	0% {left: -1000px;}
	100% {left: 0;}
}


<div id="box2>

    <section id="boxes">
      <div class="container">
        <div class="box3">
          <img src="logo_html.png">
          <h3>HTML5</h3>
          <p>I format my code, know proper tags, and learn proper ways fast.</p>
        </div>
        <div class="box4">
          <img src="logo_css.png">
          <h3>CSS3</h3>
          <p>I know how to style web pages, add animations and transitions<p>
        </div>
       </div>
    </section>
</div>
12

And how would I set my HTML / CSS Icons to be in the center of the screen horizontally to each other if flex box isn’t working?

13

Instead of spamming with different small questions you should share your code, example codepen of your project and fully explain what you are trying to achieve. And then post it all in the TS.

It’s very hard when you link several small snippets, have you linked your stylesheet properly since you don’t have anything working?

lol so you’re saying you cant set the h1 tag to center? it HAS to be in a div?

No it doesn’t. But you really don’t want to center every h1 tag on the whole page.