Why are my navbar options/buttons stacking on top of each other?

By -

Earlier I changed something to my CSS and messed with the class/ID for my navbar for my page and it lead to the buttons stacking on top of each other... Can anyone figure out what's wrong or how I can fix this?

I included my code and a picture of what's going on... I've toyed around with it but to no avail... Also some stuff in my CSS is empty because I'm still working on it.

Thanks so much.

Navigation Bar

html {
  background-color: #85BDA6;
}

#header {
  text-align: center;
  font-size: 35px;
  padding-top: 80px;
  padding-bottom: 50px;
  
}

#header-2 {
  text-align: center;
  font-size: 30px;
  padding-bottom: 20px;
  padding-top: 50px;
}

#header-3 {
  text-align: center;
  font-size: 30px;
  padding-bottom: 20px;
  padding-top: 50px;
}

#header-4 {
  text-align: center;
  font-size: 22px;
}

#header-5 {
  text-align: center;
  font-size: 22px;
  padding-top: 20px;
}

#header-6 {
  text-align: center;
  font-size: 30px;
  margin:0;
  padding:0;
  padding-top: 50px;
 
}

#pricing {
  padding-bottom: 50px;
  padding-top: 20px;
}

p {
  font-size: 19px;
  line-height: 1.7;
  text-align: center;
}

#video {
   margin-left: auto;
   margin-right: auto;
   display: block
   
}

#email {
  display: inline-block;
  
}

#submit {
  display: inline-block;
}

.input {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
  
}

#email {
  width: 20%;
  height: 25px;
}

#submit {
  height: 30px;
}

#nav-bar {
position: fixed;
top: 0;
right: 0;
background-color: grey;
padding-bottom: 10px;
width: 100%;
opacity: 0.5;
}

.nav-link {
font-size: 23px;
padding-top: 10px;
text-decoration: none;
display: flex;
justify-content: end;
display: inline;
right: 0;
color: white;
opacity: 1;
}

.nav-link:hover {
  text-decoration: none;
}

.bi bi-truck {

    display: block;
    margin: auto;    
}

.bi bi-emoji-smile {
  
}

.about-us {
  padding-bottom: 50px;
}

.long-distance {
  padding-bottom: 50px;
}

@media (min-width: 500px;) {
  p {
    font-size: 18px;
  }
}
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
    <body>
      <main>
        <header id="header"> Chirila & Co.
          
  <nav id="nav-bar" class="nav-options">
  <a href="#header-2" class="nav-link">About Us |</a> 
  <a href="#header-3" class="nav-link">Services |</a> 
  <a href="#header-6" class="nav-link">Pricing</a>
          </nav>          
        </header>
        <div style="text-align: center">
        <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-truck" viewBox="0 0 16 16">
  <path d="M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5v-7zm1.294 7.456A1.999 1.999 0 0 1 4.732 11h5.536a2.01 2.01 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456zM12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12v4zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
</svg>
        </div>   
        <h2 id="header-2">About Us</h2>
        
        <p class="about-us">Chirila & Co. is a moving company that was born out of the COVID-19 pandemic that started in late 2019. Since the company started, we have provided our services to hundreds of individuals and families that have moved whether it was down around the block or across the country. Our company prides itself in operating with integrity, affordability, flexbility, and great service. We acknowledge that hiring a moving company can really be a hit or miss. We want our clients and prospects to know we are a company that you can count on and trust to move your possessions in a safe and swift manner.</p>
        
<div style="text-align: center">
  <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-emoji-smile" viewBox="0 0 16 16">
  <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
  <path d="M4.285 9.567a.5.5 0 0 1 .683.183A3.498 3.498 0 0 0 8 11.5a3.498 3.498 0 0 0 3.032-1.75.5.5 0 1 1 .866.5A4.498 4.498 0 0 1 8 12.5a4.498 4.498 0 0 1-3.898-2.25.5.5 0 0 1 .183-.683zM7 6.5C7 7.328 6.552 8 6 8s-1-.672-1-1.5S5.448 5 6 5s1 .672 1 1.5zm4 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S9.448 5 10 5s1 .672 1 1.5z"/>
</svg>
        </div>
        
        
<h3 id="header-3">Services</h3>
        
        
        <h4 id="header-4">Local Moving</h4>
        
<p>Whether its around the block or across the state, our company will assist you in moving your possessions and transporting them to your new residence or space. 
  
        <h5 id="header-5"> Long-Distance Moving</h5>
        
<p class="long-distance">Want to move your possessions to a residence or space out of state? Maybe across the country? Not a problem. Our company offers services for long-distance moving as well. From LA to New York or from Florida to Washington, we got you covered.</p>
        
<div style="text-align: center">
  <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
  <path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
  <path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z"/>
</svg>
        </div>
        
<h6 id="header-6">Pricing</h6>
        
<p id="pricing">With Chirila & Co. we pride ourselves on flexibility and affordability. Pricing depends on various factors such as how many moving trucks may be needed and how far your new residence may be. Submit your email at the bottom of the page and we'll get one of our team members to contact you within 1 business day to discuss your situation and give you a quote. Don't worry, you're in good hands.</p>
        
<div class="container">
  <div class="box">
  </div>
  <div class="box">
  </div>
  <div class="box">
  </div>
</div>
  

<iframe width="560" height="315" src="https://www.youtube.com/embed/eiGZZCOy7Yo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
      
        <form action="https://www.freecodecamp.com/email-submit" id="form">
  <div class="input">
 <input type="email" id="email" name="email" placeholder="Enter your email..." required>
      
<input type="submit" value="submit" id="submit">
            
          </div>
     </form>
        
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js">


from Recent Questions - Stack Overflow https://ift.tt/3pAVpF9
https://ift.tt/eA8V8J

Comments

Post a Comment

Popular posts from this blog

Today Walkin 14th-Sept

By -
Image
14th Sept 2017 ( GO Through all List) Read Walkin details properly , Try to call company before attending if possible !!! ==================================== 1. Myntra through fresherworld (Call Based , Venue shared to shortlisted candidates) _____________________________ 2. Magna : Hiring for Client Harman : C++
Read more

Hibernate Search - Elasticsearch with JSON manipulation

By -
Elasticsearch with JSON manipulation Elasticsearch ships with many features. It is possible that at some point, one feature you need will not be exposed by the Search DSL. To work around such limitations, Hibernate Search provides ways to: Transform the HTTP request sent to Elasticsearch for search queries. Read the raw JSON of the HTTP response received from Elasticsearch for search queries. Direct changes to the HTTP request may conflict with Hibernate Search features and be supported differently by different versions of Elasticsearch. Similarly, the content of the HTTP response may change depending on the version of Elasticsearch, depending on which Hibernate Search features are used, and even depending on how Hibernate Search features are implemented. Thus, features relying on direct access to HTTP requests or responses cannot be guaranteed to continue to work when upgrading Hibernate Search, even for micro upgrades (x.y.z to x.y.(z+1)). Use this at your own risk.
Read more

Spring Elasticsearch Operations

By -
Elasticsearch Operations Spring Data Elasticsearch uses two interfaces to define the operations that can be called against an Elasticsearch index. These are ElasticsearchOperations and ReactiveElasticsearchOperations. Whereas the first is used with the classic synchronous implementations, the second one uses reactive infrastructure. The default implementations of the interfaces offer: Read/Write mapping support for domain types. A rich query and criteria api. Resource management and Exception translation. ElasticsearchTemplate The ElasticsearchTemplate is an implementation of the ElasticsearchOperations interface using the Transport Client. @Configuration public class TransportClientConfig extends ElasticsearchConfigurationSupport {   @Bean   public Client elasticsearchClient() throws UnknownHostException {                      Settings settings = Settings.builder().put("cluster.name", "elasticsearch").build();     TransportClient client = new P
Read more