The navigation and title refuse to align in the center

Learning coding from scratch is a challenge, especially when tasked with creating a website for school. Right now, I'm gradually getting the hang of it, but I am struggling to center my navigation and title. Everything looks fine on my 13-inch laptop, but on a larger PC, alignment becomes an issue.

If you want to take a look at the current state of my website, here's the link:

New question:

How can I ensure that both my title and subtitle are perfectly centered?

Here's a snippet of my HTML code:

<div class="titel">Portfolio</div>
            <div class="subtitel">Hier is een selectie van recentelijk werk.</div>

And this is how I've styled them using CSS:

.titel {
font-family: Raleway;
font-size: 52px;
color: #3b3d40;
text-align: center;
font-weight: 700;
margin-top: 20px;
}

.subtitel {
    font-family: Adobe Caslon Pro;
    font-size: 18px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 50px;
    }
htmlcss

Answer №1

Here is one way to style the navigation bar and title:

ul.topnav li {
   display: inline-block; /* Remove float: left */
}

ul.topnav {
   text-align: center;
}


.titel {
  font-family: Raleway;
  font-size: 52px;
  color: #3b3d40;
  font-weight: 700;
  text-align: center;
  margin-top: 20px;
  width: 100%;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  font-family: Raleway;
  font-weight: 500;
  text-align: center; /* Remove float: center */
  position: center center; /* Not valid property value */
}
ul.topnav li {
  display: inline-block; /* Remove float: left */
}
ul.topnav li a {
  display: inline-block;
  color: #3b3d40;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 10px;
  letter-spacing: 2px;
}
ul.topnav li a:hover {
  background-color: #555;
}
ul.topnav li.icon {
  display: none;
}
<ul class="topnav" id="myTopnav">
  <li><a href="index.html">HOME</a>
  </li>
  <li><a href="portfolio.html">PORTFOLIO</a>
    <div style="margin-top:-12px;border-bottom:1px solid #3b3d40;height:1px;"></div>
  </li>
  <li><a href="blog.html">BLOG</a>
  </li>
  <li><a href="projecten.html">PROJECTEN</a>
  </li>
  <li><a href="ontwerpproces.html">ONTWERPPROCES</a>
  </li>
  <li><a href="verantwoording.html">VERANTWOORDING</a>
  </li>
  <li><a href="over.html">OVER</a>
  </li>
  <li><a href="contact.html">CONTACT</a>
  </li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>


<div class="titel">Portfolio</div>

Answer №2

To achieve the desired layout, utilize flexbox. Both the invisible item and the right div should have equal width. Be sure to insert some content into the invisible div and remove the visibility:hidden; property.

.header{
  height:60px;
  background-color:green;
  display:flex;
  flex-direction:row;
  align-items:center;
}
.header>div:first-child {
  margin-right: auto;
  visibility: hidden;
  width:100px;
}
.header .navigation{
  height:50px;
  margin:0;
  text-align:center;
  color:white;
}
.header .right{
  margin:0;
  padding:0;
  margin-left:auto;
  width:100px;
}
.header .right img{
  width:30px;
  margin:0 5px;float:right;
}
<div class="header">
  <div>invisible</div>
  <div class="navigation">Navigation Bar</div>
  <div class="right">
    <img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
  <img src="http://images.financialexpress.com/2015/12/Lead-image.jpg"/>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Change the button text without the need for a click, automatically switch

How can I make a button switch between 'click here' and 'download' every 2 seconds without requiring user interaction? The code I've tried so far is below, but it's not working as expected: <div class="assetClass customBut ...

jqueryhtml

Submitting the form with a target of _blank will result in the form being submitted on both a

I am currently working on a form that includes both a "Submit" button and a "Preview" button. While the submit button is functioning correctly, I am experiencing an issue with the Preview button. When clicked, it opens up a new page with the preview as in ...

phpjqueryhtmlformslaravel

Mastering the art of horizontal alignment for button and ul elements

I aim to create a unique layout that appears as follows: [the button][world1][world2] The code provided is in HTML format: <div id='container'> <button id='my-button'>the button</button> <ul id='my-ul&a ...

css

Upon the initial hover, the data added to the title tag following an Ajax call is not appearing

I am currently working on an ajax request that retrieves information such as username, email, and user_id. Once the ajax call is successful, I use jQuery to append this data to the title tag. The main issue I am facing is that the data is only displayed af ...

javascriptjqueryhtmlcssajax

Place a material-ui React component at the center of a footer section

I'm facing a challenge with centering a material-ui Simple Breadcrumbs component within a footer as opposed to having it aligned to the left. Even though I'm new to this, I thought it would be straightforward but I can't seem to figure it ou ...

javascripthtmlcssreactjsmaterial-ui

It is important for the button size to remain consistent, regardless of any increase in text content

My goal was to keep the button size fixed, even as the text on it grows. This is the current code I am using: .button { border: none; color: white; padding: 10px 50px; text-align: center; text-decoration: none; display: inline-block; font ...

javascripthtmlcss

Website Navigation: A guide to organizing columns and rows for optimal user experience

Just reaching out with a question regarding my coding process. Currently, I am in the midst of translating the website's navigation design into code. The attached image showcases the navigation layout consisting of 10 rows and 8 columns. Below is a s ...

htmlcsshtml-tablenavigation

Internet Explorer and Edge browsers are concealing box shadow behind the parent div

When using an input slider range, the box-shadow is being applied to the active thumb in all browsers except for IE & EDGE. In these browsers, the shadow is cutting or hiding behind the parent div #c. I have already tried setting overflow:visible on the p ...

htmlcss

After applying 'all: unset;' to remove all styles, the CSS hyphens property does not work as expected in Chrome

After applying this CSS code to remove all styles: * { all: unset; display: revert; } The issue arises in Chrome browser where CSS Hyphens are not taking effect. This can be seen with the following example: div { font-size: 3rem; -webkit-hy ...

cssgoogle-chrome

What is the best way to position this material-ui select list at the bottom of the input block for proper alignment?

My material-ui select build is working fine overall, but I'm looking to align the top line of the select list with the bottom line of the input block. Any ideas on how to achieve this? This is my code: const styles = theme => ({ formControl: { ...

cssreactjsmaterial-ui

What are some techniques for highlighting the significance of specific items within an unorganized list?

My goal is to utilize semantic markup to highlight the importance or priority of each item. Let me illustrate what I mean with an example. <ul itemscope itemtype="http://schema.org/ItemList"> <h2 itemprop="name">Wish List</h2><br&g ...

htmlsemanticsschema.orgmicroformats

When hovering over individual links within a set of blocks, ensure that the other links are not affected or disrupted

I need help creating a forum category link guide. Similar to this example... Specifically, I want it to display as Forums > The Financial Roadmap Two issues I am facing are: when hovering over the link, it shifts down one row and how can I add blocks ...

htmlcss

What is the best way to make a div span the entire height of the body?

I have a menu that I want to wrap inside a yellow div. The yellow div should take up the entire height of the green square, regardless of the content size in the green square. For example, if the orange square expands, the yellow div should also expand. H ...

htmlcss

The CSS 'top' attribute is without impact

As I begin my journey with CSS, I am eager to grasp some of its behaviors. In the CSS file, the following code is defined: #spa { position : absolute; top : 8px; left : 8px; bottom : 8px; right : 8px; min-height : 500px; min-width : 500px ...

htmlcss

The output from the xpath query is: [object Text]. Ideally, it should be a valid element

I am currently experiencing an issue with the text "Access my account" at the end of the page that has been causing errors <p class="breadcrumb"> <a href="http://www.examplewebsite/comm/index-eng.html" title="Titleblock">Home</a>& ...

phphtmlcssxpath

What steps can I take to ensure these three images all have identical height and width?

Just starting out with Bootstrap 4 and I have a question about making images inside a card the same height and width. Can anyone help me figure out which div to input an attribute to achieve this? Here's the HTML code below the image: <link href ...

cssbootstrap-4

Height of inline-block list items in ul is not properly adjusted

I am working on a horizontal navigation bar using inline-block for the li tags. Here is the code snippet: <ul> <li><a href="#">HOME</a></li> <li><a href="#">FEATURES</a></li> <li><a href ...

javascriptjqueryhtmlcss

What is the best way to display a single font in various sizes?

Have you ever noticed the unique typography on typedetail.com? The font sizes of the logo (TYPE DETAIL) and the title (ABOUT TYPE DETAIL) are different, with the first letters appearing larger than the rest. Surprisingly, upon inspecting the style sheets, ...

css

Exploring the power of internal linking with GatsbyJS

I am currently developing a website using gatsbyjs. I have concerns about the crawlability of "onClick" for SEO purposes and I would appreciate some assistance. This is my current code: render={data => ( <div className='feed'> ...

javascripthtmlreactjsgatsby

Struggling to get the hang of CSS animation?

Here is a code snippet that I am using: //Code for animating skills on view document.addEventListener("DOMContentLoaded", function(event) { function callback(observations, observer) { observations.forEach(observation => { if (observati ...

javascripthtmlcssioscss-animations