Page contents in Navbar not filling the screen:-CodePudding

Click here for image of problem Basically I sourced the code from getbootstrap.com but the search bar and search button are not being right-aligned in the navbar. Have tried to selectively align the search option but to no avail. Would live it if anyone helped. Thank you.

Here is the code:

```
<nav >
  <a  href="#">Navbar</a>
  <button  type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span ></span>
  </button>

  <div  id="navbarSupportedContent">
    <ul >
      <li >
        <a  href="#">Home <span >(current)</span></a>
      </li>
      <li >
        <a  href="#">Link</a>
      </li>
      <li >
        <a  href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div  aria-labelledby="navbarDropdown">
          <a  href="#">Action</a>
          <a  href="#">Another action</a>
          <div ></div>
          <a  href="#">Something else here</a>
        </div>
      </li>
      <li >
        <a  href="#">Disabled</a>
      </li>
    </ul>
    <form >
      <input  type="search" placeholder="Search" aria-label="Search">
      <button  type="submit">Search</button>
    </form>
  </div>
</nav>
```

CodePudding user response：

You can give margin and padding to the linking icons/navigation items to occupy more space of the webpage.

CodePudding user response：

Try enclose your items ul and form inside a div with d-flex

<div >
<div >
<ul>
  <li>...
  </li>
  <li >
    <a  href="#">Disabled</a>
  </li>
</ul>
</div>
<div >
<form >
  <input  type="search" placeholder="Search" aria-label="Search">
  <button  type="submit">Search</button>
</form>
</div>
</div>