Video not aligning to center of page (HTML, CSS)

I don’t know where I went wrong this always happens sometimes. Everything is manipulated perfectly for my site and then there’s one thing which cannot.

HTML code:

<video class="video" src="https://www.youtube.com/watch?v=qcderLXiwa8" controls width="640px" height= "480px" type="video/mp4">video not supported</video>

CSS


.video {

    padding: 35px;

    margin: auto;

}
1 Like

Yea that’s the css life. Can you share the rest of your code? Hard to say what’s wrong from this alone.

<html> 

  <head>

    <link   href="index.css" type="text/css" rel="stylesheet">

    <title>Sami's CSS Noes</title> 

  </head>

<!--Body of Work-->

<body>

  <header> 

    <h1 class="title">Sami's Notes</h1> 

  </header>

  <nav>

    <table class="tabelrow">

      <tr>

        <td id="htmlnotes"><h2><a href="./HTML notes.html">HTML Tables</a></h2></td>

        <td id="cssnotes"><h2><a href="./CSS notes.html">CSS Selectors</a></h2></td>

      </tr>

    </table>

  </nav>

  <table class="entiretable">

      <thead>

        <tr class="bio">

          <th>About me</th>

          <th>Firms</th>

          <th>Social</th>

        </tr>

      </thead>

      <tbody>

      <tr>

        <td class="col1">

          <p id="about-site">Hi, my name is Sami! Thank you for visiting my website. 

          Here, you will find my CSS and HTML notes for beginners. 

          Please use the information on this site for reference as 

          you go through your CSS and HTML-learning journey. 

          </p>

          <img src="https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Jackie_Chiles_in_The_Maestro_Seinfeld.JPG/220px-Jackie_Chiles_in_The_Maestro_Seinfeld.JPG">

            <!--220 x 285-->

        </td>

        <td class="col2">

            <a target="_blank" href="https://www.osborneclarke.com/services/infrastructure-services/"> <img id="clarke" src="https://storage.googleapis.com/caifornia-connect-prod/networklogo/osborne-clarke-llp.png"/></a>

            <a target="_blank" href="https://www.taylorwessing.com/en/expertise/services/data-protection-and-cyber"><img id="taylor" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQH-vZtWTA4lMw3BcwfwgF9U3t4O74goTo_9w&usqp=CAU"></a>

            <a target="_blank" href="https://www.herbertsmithfreehills.com/"> <img id="hsf" src="https://m8w8u5d7.stackpathcdn.com/wp-content/uploads/2018/09/HSF-Platinum-Profile.jpg"></a>

            <a target="_blank" href="https://www.hfw.com/Home#"> <img id="hfw" src="https://i.ytimg.com/vi/t8m5eRhay6c/maxresdefault.jpg"></a>

            <a target="_blank" href="https://www.twobirds.com/"> <img id="bird" src="https://www.imgl.org/sites/default/files/media/company_logos/green.jpg"></a>

          </td>


      </tbody>

  </table>

  <video class="video" src="https://www.youtube.com/watch?v=qcderLXiwa8" controls width="640px" height= "480px" type="video/mp4">video not supported</video>

  </aside>

</body>

</html>

CSS


h1 {

    color: whitesmoke;

    text-align: center;

    font-family: Arial;

    font-size: 60;

    letter-spacing: 10px;

    word-spacing: 20px;

    }

.tabelrow {

     font-family: Arial;

    margin: auto;

    color: whitesmoke;

}

#cssnotes {

    color: whitesmoke;

}

/*BLOCK 1*/

.bio {

    width: 220px;

    font-family: Arial;    

    background-color: #41729F;

    color:whitesmoke;

    font-size: 40px;

}

#clarke {

    width: 200px;

    padding: 10px;

}

#taylor {

    width: 200px;

    padding: 10px;

}

#hsf {

    width: 200px;

    padding: 10px;

}

#hfw {

    width: 200px;

    padding: 10px;

}

#bird {

width: 200px; 

height: 60px;

padding: 10px;

}

.col1 {

    width: 285px;

    background-color: #41729F;

    font-family: Arial;

    color:  whitesmoke;

    text-align: center;

    padding: 10px;

    line-height: 25px;

    font-weight: bolder;

}

.col2 {

    width: 285px;

    background-color: #41729F;

    font-family: Arial;

    color:  whitesmoke;

    padding: 10px;

    text-align: center;

}

.col3 {

    width: 285px;

    background-color: #41729F;

    font-family: Arial;

    color:  whitesmoke;

    padding: 10px;

    text-align: center;

}

#linkedin{

    width: 144px;

    height: 144px;

    padding: 10px;

}

#twitter {

    width: 200px;

    height: 144px;

    padding: 10px;

}

.entiretable {

    margin: auto;

    border-spacing: 10px;

    background: #274472; 

}

body {

    background-color: #C3E0E5;

}

.video {

    padding: 35px;

    margin: auto;

}
1 Like

Just add display: block; to the video class, it’ll allow you to center it. (otherwise margin: auto doesn’t know what to do)

Display is necessary for CSS to know whether you want grid, flex, inline types of behaviors to your elements.

2 Likes

Thank you! :heart: :heart: I ll give it a shot