Weird layout results in HTML/CSS

[x_c_x]

Hi all. I have the following code for some for some doodling in HTML/CSS. The first set of code is resulting in shifting the content of the second set of code. The second set is just for a simple web page/site design. I reviewed all code and see everything classed/IDd so, I'm unable to find where/why the content of the site design is shifting (not complying with the styles I used for it. Any help is appreciated! Some history, initially, the exact content being affected/shifting in the site design code first rendered at top of page. No idea why! I then edited the CSS top/right properties and it shifted down to the center (classed as center) where I thought it would render from the start. Then, I paused this design and started the DIVs (code above) and upon styling those the site design code starting shifting again. I'm lost! Thanks! =).

HTML:

<div class="style3">     
    </div>
    <div class="style4">     
    </div>
    <div class="style5">     
    </div>
    <div class="style6">     
</div>

CSS:

.style3 {
    
    margin: 10px 1px;
    width: 300px;
    height: 80px;
    background-color: crimson;
    border-radius: 5px;
    color: black;
    text-align: left;
}

.style4 {
    
    margin: 10px 1px;
    width: 300px;
    height: 80px;
    background-color: crimson;
    border-radius: 5px;
    color: black;
    text-align: left;
}

.style5 {
    
    position: relative;
    bottom: 180px;
    left: 309px;
    margin: 10px 1px;
    width: 300px;
    height: 80px;
    background-color: crimson;
    border-radius: 5px;
    color: black;
    text-align: left;
}

.style6 {
    position: relative;
    bottom: 180px;
    left: 309px;
    margin: 10px 1px;
    width: 300px;
    height: 80px;
    background-color: crimson;
    border-radius: 5px;
    color: black;
    text-align: left;
}

Site design content being affected by above.

HTML:

<div class="wrapper">
        <nav class="nav">
          <a href="index"><img class="logo" src="images/000ac.jpg"></a>
          <ul>
            <li><a href="#" class="active">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Feedback</a></li>
            <li><a href="#">Join</a></li>
          </ul>
        </nav>
        <div class="center">
          <h3>Welcome to GAME ON!</h3>
          <h3>Join the FIGHT!</h3>
          <div class="buttons">
            <button>Explore More</button>
            <button class="btn">Subscribe</button>
          </div>
        </div>
       </div>
      
CSS:

.wrapper {
    padding: 0;
    margin: 0;
}

.wrapper {
    background: url(images/bck6.jpg) no-repeat;
    background-size: cover;
    height: 100vh;
}

.nav {
    height: 89px;
    width: 100%;
    background: rgba(0,0,0,0.4);
}

.logo {
    width: 140px;
    height: 75px;
    padding: 8px 20px;
}

.nav ul {
    float: right;
    margin-right: 10px;
}

.nav ul li {
    list-style: none;
    margin: 0 8px;
    display: inline-block;
    line-height: 50px;
}

.nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 10px;
    font-family: Arial, Helvetica, sans-serif;
    transition: .5s;
}

.nav ul li a.active,
.nav ul li a:hover {
    background-color: red;
    border-radius: 4px;   
}

.wrapper .center {
    position: absolute;
    top: 290%;
    left: 45%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
    /*user-select: none;*/
}

.center h3 {
    color: white;
    font-size: 50px;
    font-weight: bold;
    width: 850px;
    text-align: center;
}

.center h3 {
    color: white;
    font-size: 50px;
    font-weight: bold;
    width: 800px;
    margin-top: 10px;
    text-align: center;
}

.center .buttons {
    margin: 35px 280px;
}

.buttons button {
    height: 50px;
    width: 150px;
    font-size: 18px;
    font-weight: bold;
    color: #ffb3b3;
    background: red;
    border: 1px solid #cc0000;
    outline: none;
    cursor: pointer;
    border-radius: 25px;
    transition: .5s;
}

.buttons .btn {
    margin-left: 25px;
}

.buttons button:hover {
    background: #cc0000;
}

 

[OldMan]

Please repost this and separate the css from the html - you have multiple things here and why should I read them to separate them?

Are they on the same page? One HTML with all the CSS together?
And where is the problem - things are the way you programmed them. Maybe show how you want things. Both button in the buttons div have bad alignment and is because of your CSS.

 

[x_c_x]

Please repost this and separate the css from the html - you have multiple things here and why should I read them to separate them?

Are they on the same page? One HTML with all the CSS together?
And where is the problem - things are the way you programmed them. Maybe show how you want things. Both button in the buttons div have bad alignment and is because of your CSS.

Sorry for the convoluted code. I also fixed this some weeks back using the CSS position: relative; property/value. Thanks again! =).