html - Container-fluid padding is not working in css and navbar brand css not working

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams <title>TinDog</title> <link rel="stylesheet" href="css/styles.css"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <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"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Ubuntu&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> </head> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <section id="title"> <div class="container-fluid">  <nav class="navbar navbar-expand-lg navbar-dark"> <a class="navbar-brand" href="">tindog</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="">Contact</a> <li class="nav-item"> <a class="nav-link" href="">Pricing</a> <li class="nav-item"> <a class="nav-link" href="">Download</a> </section> </body> </html> .container-fluid padding-left: 150px; padding-right: 150px; .navbar-brand font-family: 'Ubuntu', sans-serif; font-size: 32px:

The above CSS doesn't give padding to container-fluid, it takes the default padding, same behaviour when I give it in percentage adding even If I style the code within the HTML, the padding gets cancelled. Using container also doesn't improve the situation, the padding also gets cancelled. The code works in codeply.com but doesn't work in the atom. The font size of the navbar brand is also not changing, I tried all the values rem, px and %, then also it shows no change.

it is already in the code but doesn't appear, my bad. I edit the code and if not visible please consider it in a container-fluid class of bootstrap. – burningknight May 22, 2020 at 13:06 Make sure you have your custom CSS file loaded after the bootstrap css file. CSS that’s read by the browser will override the previous one. – Rahul May 22, 2020 at 16:40

Clear the browser's cookies and data

Try adding !important into css properties like below-

.container-fluid { padding-left: 150px !important; padding-right: 150px !important;

PS- Make sure you have included bootstrap into your code.


    
     Thanks for contributing an answer to Stack Overflow!
    
    
     
      Please be sure to
      
       answer the question
      
      . Provide details and share your research!
     
    
    
     But
     
      avoid
     
     …
    
    
     
      Asking for help, clarification, or responding to other answers.
     
     
      Making statements based on opinion; back them up with references or personal experience.
     
    
    
     To learn more, see our
     
      tips on writing great answers
     
     .